22

私にはかなりやりがいのある仕事があります。

ここにこのメニューがあります... http：//jsfiddle.net/K2Zzh/6/

「トリートメント」にカーソルを合わせると、ドロップダウンメニューの幅が150ピクセルに設定されます。これは問題ありませんが、「アフターケア」にカーソルを合わせると、この幅が広すぎることがわかります。min-width、auto、inline-blockを試しましたが、今のところうまくいきません。

ドロップダウンごとに個別のクラスを作成するのではなく、メニューごとに最も長いテキストと同じくらいの幅に幅を設定する賢い方法はありますか？

ドロップダウンに使用した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;
}​

前もって感謝します。

私の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>
4

3 に答える 3

34

最初のステップ：から固定幅を削除します.dropdown ul li a

2番目のステップ： cssを追加しますli li {width:100%;}

3番目のステップ：追加.mainNav li a {white-space:nowrap;}

準備ができました：http： //jsfiddle.net/K2Zzh/10/

</ p>

于 2012-12-16T18:09:19.343 に答える
9

あなたのクラスで試してみてwhite-space: nowrapくださいwidth: auto.dropdown ul li a

http://jsfiddle.net/K2Zzh/8/

于 2012-12-16T17:56:34.107 に答える
0

幅を「a」ではなく「li」にすると、パディングも使用できます

.dropdown ul li {
    width: auto;
    padding:5px;
    display:block;
}​

私はそれがうまくいくはずだと思います

于 2012-12-16T17:59:20.467 に答える