Question

我最近一直在搜索CSS，试图教自己一些技巧。我遇到的另一个问题与display:属性直接相关。

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

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

现在，我想知道的是，我怎样才能使它们看起来像一个列表，但是只有它包含的文本才能生成背景颜色？

Answer 1

使用像这样的标记结构

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

Answer 2

如果你想保留格式，让它们环绕文本，并为每个项目都有一行，内联块或内联不是一个选项。你必须使用花车。

您可以通过浮动项目“float：left;”强制每个元素在单独的行上并强制浮动元素在其他行上清除：both;

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

以下是一个示例：http://jsfiddle.net/Bn9Qx/

内联块，内联，块

2 个答案: