1

私は最近、CSS について検索しており、トリックを独学しようとしています。私が遭遇したもう 1 つの問題は、display:属性に直接関係しています。

「メニューボタン」の背景要素の幅を、それらに含まれるテキストと同じ幅にしようとしています。ボタンは単なる<div>要素です。

すべての幅を使用するdisplay:block;と、最も長いアイテムと同じ幅で表示され、display:inline;またはに設定するdisplay:inline-blockと、インライン要素が機能するのと同じように、単に同じ行に表示されます。

今、私が疑問に思っているのは、それらをリストのように表示するにはどうすればよいですか?ただし、テキストが含まれている限り、背景色を変更することはできますか?

4

2 に答える 2

2

このようなマークアップ構造を使用します

<ul id="menu">
<!-- By the use of UL you can have the menu displayed as list -->
    <li><a href="#">Home</a></li>
    ...
</ul>

背景CSSを適用します#menu li a

#menu li a {
    /* a (anchor tag) is an inline tag, so the background 
    will span up to its content only */

    background: url("../src/to/img.jpg");
}
于 2013-02-04T01:41:06.987 に答える
1

フォーマットを維持したい場合は、テキストを折り返して、インラインブロックまたはインラインはオプションではありません。フロートを使用する必要があります。

アイテムを「float:left;」でフローティングすることにより、各要素を個別の行に強制できます。clear:both; を使用して、浮動要素を他の行に強制します。

.item{
float:left;
clear:both;
}

例を次に示します: http://jsfiddle.net/Bn9Qx/

于 2013-02-04T03:05:21.483 に答える