html - 如何在容器内 float 多个 <ul>？

Question

我想让这些无序列表并排 float ，每个列表占据包含 div 的 50%，但是我只能在每个 ul 的宽度设置为 no 时实现超过 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 的完全错误的答案相反，元素的百分比宽度将始终按其直接父元素的百分比计算。