html - 如何将 的宽度限制为最宽项的宽度？

Question

给定以下标记:

<ul>
   <li>apple</li>
   <li class="highlight">orange</li>
   <li>pear</li>
</ul>

ul 和 li 的宽度都显示为 100%。如果我将 background-color 应用到列表项，突出显示会延伸整个页面的宽度。

我只希望背景突出显示与最宽的元素一样宽(可能有一些填充)。如何将 li(或者 ul)的宽度限制为最宽项的宽度？

Answer 1

添加 ul {float: left; 样式将强制您的列表为首选宽度，这正是您想要的。

问题是，您应该确保下一个元素位于列表下方，就像之前那样。清算应该解决这个问题。