Html 如何将 <ul> 的宽度限制为最宽项目的宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/252252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I constrain a <ul>'s width to the width of the widest item?
提问by Jacob Carpenter
Given the following markup:
鉴于以下标记：
<ul>
<li>apple</li>
<li class="highlight">orange</li>
<li>pear</li>
</ul>
Both the uls and the lis widths appear to be 100%. If I apply a background-colorto the list item, the highlight stretches the full width of the page.
无论是ulS和li小号宽度显示为100％。如果我将 abackground-color应用于列表项，突出显示会拉伸页面的整个宽度。
I only want the background highlight to stretch as wide as the widest item (with maybe some padding). How do I constrain the lis (or perhaps the uls) width to the width of the widest item?
我只希望背景突出显示与最宽的项目一样宽（可能有一些填充）。如何将lis（或可能是uls）宽度限制为最宽项目的宽度？
回答by buti-oxa
Adding ul {float: left; }style will force your list into preferred width, which is what you want.
添加ul {float: left; }样式将强制您的列表进入首选宽度，这正是您想要的。
Problem is, you should make sure next element goes below the list, as it did before. Clearing should take care of that.
问题是，您应该确保下一个元素在列表下方，就像以前一样。清算应该照顾到这一点。
回答by BoltBait
Can you do it like this?
你可以这样做吗？
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
回答by nickf
Exactly as BoltBait said, wrap your text in an inline element, such as spanand give that the class.
正如 BoltBait 所说，将您的文本包裹在一个内联元素中，例如span并给出该类。
<ul>
<li>apple</li>
<li><span class="highlight">orange</span></li>
<li>pear</li>
</ul>
My extra 2 cents is that if you don't have access to change the HTML, you can do it using Javascript. In jQuery:
我额外的 2 美分是，如果您无权更改 HTML，则可以使用 Javascript 来完成。在 jQuery 中：
$('li.highlight').wrapInner("<span></span>");
and use the CSS:
并使用 CSS：
li.highlight span { background-color: #f0f; }
edit: after re-reading your question, can you clarify: do you want the highlight to only go as wide as the element which is highlighted, or as wide as the widest element in the list? eg:
编辑：重新阅读您的问题后，您能否澄清一下：您希望突出显示的宽度与突出显示的元素一样宽，还是与列表中最宽的元素一样宽？例如：
- short
- items ********************
- here
- and then a really long one
...where the asterisks represent the highlighting. If so, then buti-oxa's answer is the easiest way. just be careful with clearing your floats.
...其中星号代表突出显示。如果是这样，那么buti-oxa 的答案是最简单的方法。小心清理你的浮标。
回答by TylerH
The <ul>element has display: block;as its default displayproperty, causing the width to fill 100% of its container.
该<ul>元素具有display: block;作为其默认display属性，导致宽度填充其容器的 100%。
To change this aspect and still retain all the other default properties of how a <ul>is displayed (e.g. avoid issues with floatfrom other answers), apply display: inline-block;to the list:
要更改此方面并仍保留 a<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>回答by Nathan
Adding style="float: left;"to ulwill cause the ulto only stretch as wide as the widest item. However, the next element will be placed to the right of it. Adding style="clear: left;"to the next element will place the next element after the ul.
添加style="float: left;"到ul将导致ul仅与最宽的项目一样宽。但是，下一个元素将放置在它的右侧。添加style="clear: left;"到下一个元素会将下一个元素放在ul.
See documentationon floatand clear.
见文档上float和clear。
回答by redress
The best way of going about solving this without messing up the style of your existing layout, is by wrapping the uland liin a divwith display: inline-block
在不弄乱现有布局样式的情况下解决此问题的最佳方法是将ul和包裹li在一个divwithdisplay: inline-block
<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>
