Question

我想将列表元素放在一个有边界的div中，所以它们将从右到左“一路”，并且正好采用960px的宽度，但由于某种原因，我无法在它们之间留出空间来捕捉所有960像素。

HTML：

    <div class="wrapper">

        <ul>
            <li class="menu red">1</li>
            <li class="menu blue">2</li>
            <li class="menu yellow">3</li>
            <li class="menu yellow">4</li>
        </ul>

</div>

JSFiddle：http://jsfiddle.net/yuvalsab/MvaeF/

Answer 1

您需要删除ul上的默认填充以及li上可能的边距。

ul {
    border:5px solid black;
    margin:0;
}

请检查：http://jsfiddle.net/MvaeF/2/

Answer 2

首先......你需要检查你的比赛。 960 - 对于LI，UL 5px填充（5 x 2 = 10）= 950。

这让你有950。除以4，每个都有237.5。

现在，你有8px边框...所以4 x 2 = 16。 LI为237 - 16 = 221px宽。注意，你有200px而不是221 ......所以这是你看到的一些空间问题。

另一个问题，本地，浏览器提供UL和LIs保证金，不同浏览器的金额不同。如果你没有正常化，那么你必须手动。

ul, li {margin:0px; padding:0px; }

这将确保不会干扰您的数学运算。我想你刚刚编辑过它。

无论如何......使用0填充和0边距。然后确保你的数学是稳定的。

Answer 3

我使用display: table和display: table-cell技术。这样，您就不必在项目上定义宽度。

div.wrapper {
  width:960px;
  margin: 0 auto;
}

ul {
  border:5px solid black;
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul li.menu {
  display: table-cell;
  height: 120px;
  text-align: center;
  padding: 55px 0 0 0;
  border: 8px solid;
  font-size: 25px;
}

<强> Demo

在div </li>中分发<li>元素

3 个答案: