html - 多行内联元素两侧不需要的空间

Question

我有一个水平菜单，其中的按钮可以包含一行或两行文本。对于单行按钮，按钮的宽度等于文本的宽度。但是对于多行按钮，文本两边都会添加额外的空白。

看例子:

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;
}

说明问题的 fiddle :http://jsfiddle.net/gxy9fa9w/

当然这是一个众所周知的问题，但我尝试的每一个修复都没有帮助:使跨度向左浮动，将 font-size: 0 放在父级上，并将 font- size: 16px on the child, negative box-shadow, various display type on a, span and li... 问题似乎与 a 元素有关:没有，我可以通过使span 向左浮动，但有了它我无法删除这些不需要的空格。

提前致谢。

Answer 1

将此属性添加到 span:

span{
  display:block;
}

因为 span 是内联，所以它不会填充其父级