内联块列表项中不需要的边距
我有以下的HTML：
<ul> <li> <div>first</div> </li> <li> <div>first</div> </li> <li> <div>first</div> </li> <li> <div>first</div> </li> </ul> 和下面的CSS规则：
ul { padding: 0; border: solid 1px #000; } li { display:inline-block; padding: 10px; width: 114px; border: solid 1px #f00; margin: 0; } li div { background-color: #000; width: 114px; height: 114px; color: #fff; font-size: 18px; }
出于某种奇怪的原因，列表项在Firefox和Chrome浏览器中都以边距显示。 看着萤火虫，名单上的项目根本没有任何余地，但是它们之间似乎有空隙。
如果我稍后通过javascript使用添加更多的列表项
$('<li><div>added via js</div></li>').appendTo($('ul'));
新的元素周围不出现“边缘”：
任何想法到底发生了什么？
这是由display: inline-block;引起的display: inline-block;
li { display: inline-block; padding: 10px; width: 114px; border: solid 1px #f00; margin: 0; }
将其更改为float: left; 。
我认为这是填充，但仔细看了看，原来是显示:)
这里的例子 。
经过进一步的研究，我发现inline-block是一个依赖于空白的方法，并在每个元素的右边呈现一个4px的边距。
为了避免这种情况，您可以将所有的内容一起放入一行，或者封闭结束标签，并像这样开始标记：
<ul> <li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li><li> <div>first</div> </li> </ul>
这里的例子 。
希望帮助:)
我发现了一个很好的技巧来克服这个同样的问题。 我的顶部菜单中的列表项在每次删除“float：left”后都有空白边距。 有利于“display：inline-block;”。
尝试将无序列表的字体大小设置为“0”，即：
ul { font-size:0; } li { font-size:18px; }
为我工作。
看到这个post和给出的答案，我想我会解释这是怎么回事。 这不是一个错误，但实际上是内联块的预期行为。
说明为什么这是正确行为的最好方法是在一个段落中使用表情符号：
<p> Hi, really glad to hear from you yesterday <img src="annoying_smiley.gif"/><img src="annoying_smiley.gif"/>. </p>
默认情况下，图像显示为内联块（IE：一种服从内联stream的块元素 – 非常像文本的单个字符）。 在这种情况下，你会希望两个笑脸彼此相邻，但是你仍然需要一个“昨天”和第一个笑脸之间的空间。
希望这解释它，也解释了为什么内联块花了很长时间才得到充分的支持; 实际上并没有太多的使用情况。
要回答你的问题，你最好的办法是做到这一点：
ul { height: some set height /* OR */ overflow-y: auto; } ul li { float: left; }
在我看来，在这种情况下，最好的办法是删除li的父母的字母间距，并重新把它放在li ！
所以你的CSS规则：
ul{ padding: 0; border: solid 1px #000; letter-spacing :-4px; /*Remove the letter spacing*/ } li{ display:inline-block; padding: 10px; width: 114px; border: solid 1px #f00; margin: 0; letter-spacing :0px; /*Put back the letter spacing*/ }
删除所有</li>标签。 我不知道为什么，但这会解决您的保证金问题。
<ul> <li> <div>first</div> <li> <div>first</div> <li> <div>first</div> <li> <div>first</div> </ul>
我刚刚发现了这种情况的原因。 看起来在使用内联块时，元素内的任何空白都被渲染。
所以，而不是写作
<li> <div>first</div> </li> <li> <div>first</div> </li>
我应该写：
<li> <div>first</div> </li><li><div>first</div> </li><li>....
li和它之间不留空格。 当通过js进行追加时，没有出现这个空格的原因是appendTo方法的所有标签之间没有任何空格。 是的，这很糟糕，但如果我不想使用float：left，这是唯一的解决scheme。
解决scheme在这里
更改display: inline-block display: table-cell也会删除空间。
li { display: table-cell; padding: 10px; width: 114px; border: solid 1px #f00; margin: 0; }
我在这里find了这个问题的答案： http : //robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
他说：
“…有一个巨大的缺点，就是因为元素变成了内联，所以你的HTML代码中的空白会影响渲染，也就是说，如果我们的LI元素之间有空间代码，它会在每个元素的右边呈现一个4像素的边距。“
所以解决scheme是删除inline-block元素之间的换行符。
<ul> <li><a href="#">Make</a></li> <li><a href="#">Love</a></li> <li><a href="#">Not</a></li> <li><a href="#">War</a></li> </ul>
成为…
<ul> <li> <a href="#">Make</a> </li><li> <a href="#">Love</a> </li><li> <a href="#">Not</a> </li><li> <a href="#">War</a> </li> </ul>
讨厌的边缘消失。
试试这个解决scheme
<ul><!-- --><li><div>first</div></li><!-- --><li><div>first</div></li><!-- --><li><div>first</div></li><!-- --><li><div>first</div></li><!-- --></ul>
