1

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

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

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

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

4

2 回答 2

2

使用这样的标记结构

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

并将背景 CSS 应用到#menu li a

#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");
}
于 2013-02-04T01:41:06.987 回答
1

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

您可以通过浮动您的项目“float:left;”来强制每个元素在单独的行上。并使用 clear:both 强制其他行上的浮动元素；

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

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

于 2013-02-04T03:05:21.483 回答