logo标签列表

为什么两个占50%的元素无法放在同一行？

css
4

问题

如果两个 <li> 的宽度都是 50%，为什么它们不会并排显示？

代码

在 jsfiddle 上查看演示。

HTML

<ul>
    <li>left</li>
    <li>right</li>
</ul>

CSS

ul {
    padding: 0;
}
li {
    list-style: none;
    display: inline-block;
    width: 50%;
    font-size: 12px;
    color: gray;
    background-color: rgb(216, 216, 216);
    padding: 3px;
    text-align: center;
    border: 1px solid rgba(179, 179, 179, 0.83);
}
由于inline-block元素之间存在padding、border和white space，我在jsfiddle中将它们全部删除了（请注意li元素之间没有空格）。 - Vucko
然而，您可以使用box-sizing: border-box来使用padding和border值 - jsfiddle。 - Vucko
6个回答
5
因为默认情况下，margin、padding和border是计算在元素外部而不是内部的。因此，3px的padding + 1px的border将添加到所有边缘的50%中。
另外，我不确定您是否重置了元素的浏览器默认margin和padding，如果没有，请这样做。您可以使用全局选择器，但有些人反对它会影响一点性能，例如：
* {
   margin: 0;
   padding: 0;
}

如果您想以一种宽松的方式进行重置，那么可以使用CSS重置样式表

enter image description here

因此，为了计算内部的 padding 和 border，您需要使用值为 border-box 的 box-sizing 属性。
此外，您正在使用 inline-block，这将留下一个仅为 4px 的 margin / 空格，因此使所有的 li 在一行中。或者您可以将元素 float 到左侧，这样您就不必在源文档中将所有的 li 放在一行中。 Demo

如果您选择使用 float 方案，请确保清除浮动元素。

3
第一个问题：使用display:inline-block属性时，元素之间会有一个white-space。这使得
  • 元素的宽度超过了100% + white-space，因此它们无法放在同一行上，最好使用float:left来解决问题。 第二个问题：你给li元素添加了3像素的边框，这使得它们的宽度超过了50%。你可以使用box-sizing:border-box;属性，将边框置于li元素内部。
    CSS:
    ul {
    padding: 0;
    padding:0;
}
li {
    list-style: none;
    float:left;
    width: 50%;
    font-size: 12px;
    color: gray;
    margin:0;
    padding:0;
    background-color: rgb(216, 216, 216);
    text-align: center;
    border: 1px solid rgba(179, 179, 179, 0.83);
    box-sizing:border-box;
}

    JSFIDDLE

    • 1
    因为
  • 元素有填充，所以您需要删除填充或减小宽度。
    例如，
    width: 48%; 
padding: 2%
    • 0
    0

    看起来这是一个简单的问题

    看起来你想要每个<li>有3像素的填充，你有2个，那么你需要额外的6像素，而且你有1像素的边框（每个li有2个边框），这意味着你有额外的4像素。

    这意味着你需要额外10像素

    你只需要改变这一行

    width: calc(50% - 10px);

    Example http://jsfiddle.net/L5DbR/14/

    0

    这是因为填充的原因。Wash元素的宽度为50% + 3px。

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接