0

メニューの次の方法で DIV のスタイルを設定したい:

ここに画像の説明を入力

赤がメニュー バー、シアンがドロップダウン メニュー、緑がメニュー ヘッドです。メニュー ヘッドは残りのメニュー項目よりも短くなる可能性があるため、メニューをレイアウトする際にはメニュー ヘッドのみを考慮する必要があります。

これを達成することは可能ですか？

私のテストはここにあります：http://jsfiddle.net/suzancioc/W2W45/2/

<div class='menubar'>
<div class='menu'>
   <div class='menuhead'>menu 1</div>
   <div class='menubody'>
       long item name 1.1</br>
       long item name 1.2</br>
       long item name 1.3</br>          
   </div>
</div>
<div class='menu'>
   <div class='menuhead'>menu 2</div>
   <div class='menubody'>
       long item name 2.1</br>
       long item name 2.2</br>
       long item name 2.3</br>          
   </div>
</div>
</div>

とCSS

.menubar {
   /*some fancy css*/
   height:20px;
   background:red;
}
.menu {
   float:left;
   margin:1px;
   background: cyan;
}
.menuhead {
    background: green;
}

ご覧のとおり、メニューの幅は、先頭行だけでなく、すべての行の長さで計算されているようです。

4

1 に答える 1

2

私があなたの意図を正しく理解していれば、.menubody{position:absolute;}ルールを追加して絶対配置を使用する必要があります。私はあなたの jsfiddle をフォークして適用しまし .menuheadた.menubody。URL はこちら: http://jsfiddle.net/goktugkayaalp/3usYQ/

于 2012-11-23T18:01:51.827 に答える