html - 在 div 中分配 元素

Question

我想将列表元素放置在带边框的 div 中，这样它们就会从右到左“一路”移动，宽度恰好为 960 像素，但出于某种原因我无法在它们之间留出空间来捕捉所有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

我会使用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