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; }样式会强制您的列表进入首选宽度，这就是您想要的。

问题是，您应该确保下一个元素位于列表下方，就像之前一样。清算应该照顾好。

Answer 2

你能这样做吗？

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

Answer 3

正如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 4

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

之后

Try it out

请参阅float和clear上的documentation。

Answer 5

在不弄乱现有布局风格的情况下解决此问题的最佳方法是将ul和li包裹在div display: inline-block < / p>

   <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 6

<ul>元素的默认display属性为TortoiseGit，导致宽度填充其容器的100％。

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

display: inline-block;

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

HTML UL宽度

6 个答案: