CSS 如何设置css宽度等于最长文本的长度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13903929/
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 to set css width equal to length of longest text
提问by Adam
I have quite a challenging task.
我有一个相当具有挑战性的任务。
I have this menu here... http://jsfiddle.net/K2Zzh/6/
我这里有这个菜单... http://jsfiddle.net/K2Zzh/6/
If you hover over 'treatments', the width for the dropdown menu is set at 150px, which is fine, however, if you hover over 'aftercare', you can see this width is too wide. I have tried min-width, auto, inline-block, but no luck so far.
如果您将鼠标悬停在“治疗”上，下拉菜单的宽度设置为 150 像素，这很好，但是，如果您将鼠标悬停在“护理”上，您会发现此宽度太宽了。我尝试过最小宽度、自动、内联块，但到目前为止没有运气。
Rather than creating a separate class for each dropdown, is there a clever way of setting the width to only be as large as the longest text per menu?
不是为每个下拉菜单创建一个单独的类，而是有一种巧妙的方法可以将宽度设置为仅与每个菜单的最长文本一样大？
The css code i have used for the drop down...
我用于下拉列表的 css 代码...
.dropdown ul {
position: absolute;
top: 43px;
z-index: 100;
border-left: 1px solid #f6634c;
border-bottom: 1px solid #f6634c;
border-right: 1px solid #f6634c;
}
.dropdown ul li a {
background-color: #fff;
width: 150px;
text-align: left;
}?
Thanks in advance.
提前致谢。
My HTML Code...
我的 HTML 代码...
<ul class="mainNav">
<li><a href="">Home</a></li>
<li class="dropdown">
<a href="">Treatments</a>
<ul>
<li><a href="">Body Treatments</a></li>
<li><a href="">Make Up</a></li>
<li><a href="">Skincare</a></li>
<li><a href="">Hand & Feet Treats</a></li>
<li><a href="">Hair Removal</a></li>
<li><a href="">Alternative Therapies</a></li>
<li><a href="">Eye Enhancements</a></li>
</ul>
</li>
<li><a href="">Gallery</a></li>
<li class="dropdown">
<a href="">Aftercare</a>
<ul>
<li><a href="">Body</a></li>
<li><a href="">Make up</a></li>
<li><a href="">Skin</a></li>
<li><a href="">Hand</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
回答by Sotiris
first step:remove fixed width from .dropdown ul li a
第一步：删除固定宽度.dropdown ul li a
second step:add the css li li {width:100%;}
第二步：添加cssli li {width:100%;}
third step:add .mainNav li a {white-space:nowrap;}
第三步：添加.mainNav li a {white-space:nowrap;}
It's ready:http://jsfiddle.net/K2Zzh/10/
准备好了：http : //jsfiddle.net/K2Zzh/10/
?
?
回答by Horen
Try white-space: nowrapand width: autoin your .dropdown ul li aclass
试着white-space: nowrap和width: auto你的.dropdown ul li a类
回答by Wendy Adi
Put the width to "li" instead of "a" , and you can use padding too
将宽度设置为 "li" 而不是 "a" ，您也可以使用填充
.dropdown ul li {
width: auto;
padding:5px;
display:block;
}?
i think it should works
我认为它应该有效
