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

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 应该可以工作