Question

我希望这些无序列表并排浮动，每个占用占用div的50％，但是当每个ul的宽度设置为不超过40时，我只能实现这一点％。这似乎是一个非常简单的造型情况，但我是新手，所以我可能会遗漏一些东西。

    <div class="middle">
      <ul id="filterbar">
        <li data-selection=1> Glucose Curve </li>
      </ul>
     <ul id="lookback">
       <li data-lookback=0> Today </li>
       <li data-lookback=999> Full History </li>
    </ul>
   </div>

CSS

.middle {
  width:50%;
  height:1500px;
}

ul {
  width:50%;
  height:100px;
  float:left;
  }

li {
  display:in-line;
  float:left;
  list-style:none;
  width:15%;

}

Answer 1

除了宽度为50％之外，您的UL还默认具有与其关联的边距和填充。

我有很多方法可以告诉你如何做到这一点，但是因为你的新方法，我假设你最终会阅读所有关于盒子大小调整，将边距归零的重要性，检查你的元素实际上是什么样的在开发人员工具等中，只是告诉你这是你所缺少的：

ul {
  width:50%;
  height:100px;
  float:left; 
  margin:0; padding:0;
  }

与@chopper的答案相反，完全错误，元素的百分比宽度将始终计算为其直接父元素的百分比。

Answer 2

更正的答案：将margin元素的padding和<ul>设置为零。有关详细信息，请参阅下面@Adam的答案。

如何在容器中浮动多个<ul>？</ul>

2 个答案: