如何均匀地水平分布元素？

  • Z时代
  • 2024-01-10
  • 分类：问答

我的div网页上有一个宽度固定的容器，其中包含用于登录的表单元素。在这些元素下方有一个提交按钮，忘记密码的链接等。

碰巧最后一个线元素需要的宽度比框提供的宽度少。如何均匀地传播它们？我不要

  • 默认

    | ABC |

  • 将线居中

    | ABC |

  • 也不是桌子的布局

    | A | B | C |

相反，我正在寻找实现的CSS方法：

| ABC |

那是：

  • 在所有元素之间放置相等的空间

  • 将整个内容居中，避免第一侧或最后侧

效果最好。我为2或3个元素创建了模板，如下所示：

div.spread2evenly> div {
    显示：inline-block;
    *显示：内联；/ *对于IE7 * /
    缩放：1；/ *触发hasLayout * /
    宽度：50％;
    文本对齐：居中；
}

回答：

试试这个：

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>
.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

由于您正在处理内联代码块，因此标记之间不能有空格（难看，但可以），否则该空间将可见。

这里是关于inline-block的问题的一些详细信息。您可能还需要添加display: -moz-inline-

box;。

同样，33％* 3并非100％。如果您确实想要100％并且不介意divs 之间有一些空间，则可以执行以下操作：

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}
.container > div:first-child {
    margin-left: 0;
}

以上是 如何均匀地水平分布元素？ 的全部内容， 来源链接： utcz.com/qa/415270.html

回到顶部