我怎样才能约束一个<ul>的宽度到最宽项目的宽度？

Question

鉴于以下标记：

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

ul和li的宽度似乎都是 100%。 如果我对列表项应用background-color ，突出显示会拉伸页面的整个宽度。

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

Answer 1

这个问题的答案是社区的努力。 编辑现有答案以改善此职位。 它目前不接受新的答案或互动。

有人评论我的问题，认为这可能是另一个问题的重复。 我回答并澄清了另一个问题，它是关于Android的，主要是关于JTDs驱动程序的（我没有使用过，至少我认为是这样），所以我的问题绝不是该问题的重复。

有些问题的标题相似，但又有所不同（在询问之前，我已经检查过它们并尝试过答案）。 而且，我的问题是关于我的程序的，因为我没有得到预期的输出。

现在，我的问题已经关闭，并在问题顶部显示了横幅，这可能是我没有得到任何答案的原因之一：

我该怎么办？

返回常见问题索引

Answer 2

添加ul {float: left; } ul {float: left; }风格将迫使你的名单分成首选宽度，这是你想要的。

问题是，您应该确保下一个元素在列表下方，就像以前一样。 清算应该照顾到这一点。

Answer 3

这个问题的答案是社区的努力。 编辑现有答案以改善此职位。 它目前不接受新的答案或互动。

有人评论我的问题，认为这可能是另一个问题的重复。 我回答并澄清了另一个问题，它是关于Android的，主要是关于JTDs驱动程序的（我没有使用过，至少我认为是这样），所以我的问题绝不是该问题的重复。

有些问题的标题相似，但又有所不同（在询问之前，我已经检查过它们并尝试过答案）。 而且，我的问题是关于我的程序的，因为我没有得到预期的输出。

现在，我的问题已经关闭，并在问题顶部显示了横幅，这可能是我没有得到任何答案的原因之一：

我该怎么办？

返回常见问题索引

Answer 4

你可以这样做吗？

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

Answer 5

正如 BoltBait 所说，将您的文本包装在一个内联元素中，例如span并为其指定类。

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

我额外的 2 美分是，如果您无权更改 HTML，则可以使用 Javascript 来完成。 在 jQuery 中：

$('li.highlight').wrapInner("<span></span>");

并使用 CSS：

li.highlight span { background-color: #f0f; }

---

编辑：重新阅读您的问题后，您能否澄清一下：您希望突出显示的宽度与突出显示的元素一样宽，还是与列表中最宽的元素一样宽？ 例如：

- short
    - items ********************
    - here
    - and then a really long one

...其中星号代表突出显示。 如果是这样，那么buti-oxa 的答案是最简单的方法。 小心清理你的浮标。

Answer 6

添加style="float: left;" to ul将导致ul仅与最宽的项目一样宽。 但是，下一个元素将放置在它的右侧。 添加style="clear: left;" 到下一个元素会将下一个元素放在ul 。

试试看

请参阅有关float和clear文档。

Answer 7

在不弄乱现有布局样式的情况下解决此问题的最佳方法是将ul和li包装在带有display: inline-block的div

   <div id='dropdown_tab' style='display: inline-block'>dropdown
        <ul id='dropdown_menu' style='display: none'>
            <li>optoin 1</li>
            <li>optoin 2</li>
            <li id='option_3'>optoin 3
                <ul id='dropdown_menu2' style='display: none'>
                    <li>second 1</li>
                    <li>second 2</li>
                    <li>second 3</li>
                </ul>
            </li>
        </ul>
    </div>

Answer 8

不幸的是，现有的答案都没有提供正确的解决方案。 它们的范围从滥用float属性到完全重组您的 HTML，这通常是不可行的。

<ul>元素具有display: block; 作为其默认display属性，导致宽度填充其容器的 100%。

要更改此方面并仍然保留<ul>显示方式的所有其他默认属性（例如，避免其他答案中的float问题），请应用display: inline-block; 到列表：

 ul { display: inline-block; background-color: green; } .highlight { background-color: orange; /* for demonstration */ padding: 15px; /* for demonstration */ }

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