使列表項適合其內容

[英]Make list item fit its contents


I have the following list in HTML:

我在HTML中有以下列表:

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

The accompanying CSS. Understand that I want to use differently sized buttons for different lists.

附帶的CSS。了解我想為不同的列表使用不同大小的按鈕。

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

The li's do not expand to fit the spans inside of them. This has the effect of throwing off the margin of the whole list, which will be especially important when I turn the list into a horizontal menu.

li不會擴展以適應它們內部的跨度。這具有拋棄整個列表邊距的效果,這在我將列表轉換為水平菜單時尤為重要。

Also, the reason I have styled spans inside the li's instead of styling the li's themselves is because some of those spans will actually be links.

另外,我在li里面設計的樣式而不是自己設計樣式的原因是因為其中一些跨度實際上是鏈接。

2 个解决方案

#1


6  

This great article is drilling into your problem and showing what a good practise is: http://css-tricks.com/keep-margins-out-of-link-lists

這篇精彩的文章正在探討您的問題並展示一個好的做法:http://css-tricks.com/keep-margins-out-of-link-lists

That is, if I understood what you were aiming for, your question could be a bit clearer. :)

也就是說,如果我理解你的目標,你的問題可能會更清楚一些。 :)

#2


3  

You must declare the span as an Blockelement with display:block;

您必須使用display:block將span作為Blockelement聲明;

Is it the solution for you?

它是你的解決方案嗎?


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2011/03/06/72a27191b77f7eefc61e31a4a32109a3.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com