使列表项适合其内容

Question

我在HTML中有以下列表：

<ul>
    <li><span class="button">A</span></li>
    <li><span class="button">B</span></li>
    <li><span class="button">C</span></li>
</ul>

随附的CSS。了解我想为不同的列表使用不同大小的按钮。

.button
{
    background: blue;
    padding: 0.5em;
}

li不会扩展以适应它们内部的跨度。这会导致丢失整个列表的边距，这在我将列表转换为水平菜单时尤为重要。

另外，我在li里面设计了样式而不是自己设计样式的原因是因为其中一些跨度实际上是链接。

Answer 1

这篇精彩的文章深入研究了您的问题并展示了一个好的做法：http://css-tricks.com/keep-margins-out-of-link-lists

也就是说，如果我理解你的目标，你的问题可能会更清楚一些。 ：）

Answer 2

您必须将span声明为具有display:block;

的阻止元素

这是你的解决方案吗？