1

次のように DIV のスタイルを設定することは可能ですか。

ここに画像の説明を入力

シンプルなコードで

<div class='menubar'><div class='menu'>item1<br/>item2</div>...</div>

メニュー用です。選択したDIVのサイズを変更したいだけです。

機能は次のとおりです。

1) DIV は、絶対位置を指定せずに左から右に配置されます。

2) DIV はコンテナー DIV よりも高くなっていますが、引き伸ばさないでください。

アップデート

DIV または SPAN で説明してください。LEFT を使用できませんでした。解決策を準備するのではなく、学ぶ必要があります。

4

3 に答える 3

1

これはかなり基本的なものです。

1) div を使用せず、リストを使用する 2) 子要素をフロートする

<ul class='menubar'>
   <li></li>
   <li></li>
   <li></li>
   <li></li>
</ul>

およびそれに応じた css:

ul.menubar{
   /*some fancy css*/
   height:<x>px; /* is needed since it would collapse otherwise*/
}
ul.menubar > li{
   float:left;
   /* more fancy css */
}

それでは、ファンシーなデモをご覧ください。

于 2012-11-23T15:41:30.477 に答える
0

これは、どのブラウザで動作させたいかによって異なります。ie8以下の場合、このコードを使用しないことをお勧めします。すべてのブラウザバージョンを希望するが、5.5、6、7、および8を無視する場合は、受信トレイに入れてください。

まず、メニューについては、divとそのIDおよびクラスを選択するよりも、順序なしリストメソッドを使用する方が簡単だと思います。ここに小さな例があります。

HTMLリスト

<ul id="menu">
    <li>
        <a href="#">list1</a>
    </li>
    <li>
       <a href="#">List2</a>
       <ul>
           <li>
               <a href="#">Option2</a>
           </li>
       </ul>
</ul>

メニューのCSS：

body, html {
    padding:0px;
    margin:0px;
    width:100%;
}
body{
    background:#FCFCFC;
}
#menu{
    background:#333333;
    list-style-type:none;
    padding:0px;
    margin:0px;
}
#menu > li {
    padding:0px;
    margin:0px;
    display:inline-block;
}
#menu > li > a {
    color:#FFFFFF;
    text-decoration:none;
    font-size:20px;
    font-weight:bold;
}
#menu > li > ul {
    display:hidden;
    position:absolute;
}
#menu > li:hover > ul{
    display:block;
}

それはとにかく基本です。準備ができたら！;

于 2012-11-23T15:49:00.980 に答える
0

divに幅を設定してから、float:left;? これはコンテナを引き伸ばしません

display:inline-block;（divで）使用text-align:center;してコンテナに設定することもできます。しかし、それはコンテナを伸ばします。

于 2012-11-23T15:40:53.880 に答える