1

我想让这些无序列表并排浮动，每个列表占据包含 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%;

}

4

2 回答 2

2

除了 50% 的宽度之外，您的 UL 还默认具有关联的边距和内边距。

有很多方法可以告诉你如何做到这一点，但因为你的新我假设你最终会阅读所有关于 box-sizing、归零边距的重要性、检查你的元素在开发者工具中的实际外观等，只是告诉你这是你所缺少的：

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

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

于 2013-09-19T00:15:19.717 回答
-1

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

于 2013-09-18T23:33:16.010 回答