Question

<ul style="background: blue; list-style: none; width: 40px; height: 40px; color: white">
  <li style="float: left; width: 20px; background: red">a</li>
  <li style="float: left; width: 20px; background: green; height: 40px">b</li>
</ul>

这一点HTML / CSS似乎产生了一个80px宽的ul - 而不是40px宽。而且我不确定为什么。有任何想法吗？这是小提琴：

http://jsfiddle.net/qJvmM/

谢谢！

Answer 1

因为ul默认情况下通常有填充。

您需要将其重置为零：

ul {
  padding: 0;
}

Answer 2

这是因为ul

的默认边距和填充

<ul style="background: blue; list-style: none; width: 40px; height: 40px; color: white;margin:0; padding:0">
  <li style="float: left; width: 20px; background: red">a</li>
  <li style="float: left; width: 20px; background: green; height: 40px">b</li>
</ul>

<强> DEMO

Answer 3

这是应该如何的风格

<ul style="float:left; display:inline; background: blue; list-style: none; width: 40px; height: 40px; color: white; padding:0; margin:0;">

总是习惯使用重置css你可以在这里看一下参考： http://newtowebdesign.blogspot.in/2011/09/tips-on-cross-browser-css.html

为什么左边有空间？

3 个答案: