内联-块、内联、块

Question

我最近一直在搜索CSS，试图自学其中的诀窍。我遇到的另一个问题与display:属性直接相关。

我一直在尝试让我的“菜单按钮”的背景元素的宽度和它们包含的文本一样宽。这些按钮仅仅是<div>元素。

当我使用display:block;时，它们的所有宽度都与最长的项一样宽，而当我将其设置为display:inline;或display:inline-block时，它们只是显示在同一行上，就像内联元素的工作方式一样。

现在，我想知道的是，我如何才能让它们看起来像一个列表，但仍然使背景颜色只与它所包含的文本一样长？

Answer 1

如果你想保持格式，让它们在文本周围换行，并为每个项目留出一行，inline-block或inline不是一个选项。你必须使用浮点数。

你可以通过浮动你的项目"float:left;“并用clear:both将被浮动的元素强制放在其他行上，强制每个元素放在一个单独的行上。

.item{
float:left;
clear:both;
}

下面是一个例子：http://jsfiddle.net/Bn9Qx/

Answer 2

使用如下的标记结构

<ul id="menu">
<!-- By the use of UL you can have the menu displayed as list -->
    <li><a href="#">Home</a></li>
    ...
</ul>

并在#menu li a上应用背景CSS。

#menu li a {
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */

    background: url("../src/to/img.jpg");
}