【发布时间】：2014-11-20 01:25:36
【问题描述】：
我有一个带有按钮的水平菜单，可以有一两行文本。对于单行按钮，按钮的宽度等于文本的宽度。但是使用多行按钮时，会在文本的两侧添加额外的空白。
参见示例：
HTML（尝试在标签之间没有换行和空白，没有帮助）：
<ul>
<li><a href="#"><span>Lorem Ipsum</span></a></li>
<li><a href="#"><span>Lorem ipsum dolor sit amet</span></a></li>
<li><a href="#"><span>Lorem Ipsum</span></a></li>
</ul>
CSS：
li {
display: block;
float: left;
max-width: 100px;
background-color: green;
text-align: center;
border-right: 1px solid #fff;
font-size: 0;
}
li a {
color: #fff;
display: block;
}
li a span {
background-color: red;
font-size: 16px;
}
小提琴说明问题：http://jsfiddle.net/gxy9fa9w/
当然这是一个众所周知的问题，但是我尝试的每个修复都没有帮助：使跨度向左浮动，将font-size: 0 放在父级上，将font-size: 16px 放在子级上，负盒阴影，各种显示在 a、span 和 li 上键入...问题似乎与 a 元素有关：没有，我可以通过使 span 向左浮动来解决问题，但有了它我就无法删除这些不需要的空格。
提前致谢。
【问题讨论】：
-
这与“众所周知的问题”无关（假设您的意思是内联元素标签之间的空白问题），但完全不同：您限制了
li元素到100px的max-width，这就是您的li元素在此处采用的宽度，因为您要放入其中的文本内容比100 像素宽。当然，文本会中断，但这不会神奇地使li宽度“收缩”到较低的值…… -
旁注，您可以移除显示：li 上的块，因为您将它向左浮动。
-
CBroe 的评论是正确的。如果你添加一个换行符（
<br>标签），它会做你想做的事，因为它不再试图超出你的最大宽度。 -
有趣，但我无法控制按钮内的文本并手动放置换行符。除此之外，菜单应该是响应式的，所以 li 的最大宽度可以改变，因此换行。