如何设置css宽度等于最长文本的长度 [英] how to set css width equal to length of longest text

问题描述

我有一个非常具有挑战性的任务。

I have quite a challenging task.

我有这个菜单... http://jsfiddle.net/K2Zzh/6/

I have this menu here... http://jsfiddle.net/K2Zzh/6/

如果您将鼠标悬停在处理上，下拉菜单设置为150px，这是罚款，但是，如果你将鼠标悬停在后续，你可以看到这个宽度太宽。我尝试了min-width，auto，inline-block，但没有运气到目前为止。

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.

而不是为每个下拉菜单创建一个单独的类，是有一个聪明的方式将宽度设置为只与每个菜单中最长的文本一样大？

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?

我使用的css代码用于下拉...

The css code i have used for the drop down...

.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;
}​

提前感谢。

我的HTML代码...

My HTML Code...

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

推荐答案

第一步：固定宽度从 .dropdown ul li a

第二步：添加css li li {width：100％;}

第三步： $ c> .mainNav li a {white-space：nowrap;}

third step: add .mainNav li a {white-space:nowrap;}

准备就绪： http://jsfiddle.net/K2Zzh/10/

这篇关于如何设置css宽度等于最长文本的长度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！