使列表项适合其内容

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

也就是说,如果我理解你的目标,你的问题可能会更清楚一些.:)