Question

我正在尝试创建一个简单的导航栏，列表项会在鼠标悬停后突出显示。但是，默认情况下，列表项占用页面宽度的100％，因此将鼠标悬停在空白区域上也会突出显示列表项。

如果没有单独调整每个项目的宽度，是否有可以应用的毯子样式使列表项的宽度等于其文本的大小？

这是我的导航栏和我的样式表：

<div id="navbar">
    <ul>
        <li>Bio</li>
        <li>News</li>
        <li>Music</li>
        <li>Tour</li>
        <li>Video</li>
        <li>Contact</li>
        <li>Press</li>
        <br>
        <li>Facebook</li>
        <li>Twitter</li>
        <li>Tumblr</li>
        <li>Instagram</li>
    </ul>
</div>

CSS：

#navbar{
font-family: "Helvetica", "Sans-Serif";
}

#navbar ul li {
list-style-type: none;
}

#navbar ul li:hover {
background-color:#B2322B;
color: #FFFFFF;
}

Answer 1

display: inline-block应该有效

有没有一种简单的方法可以将列表项宽度设置为文本长度？

1 个答案: