0

CSS 表示のインラインとブロックをよりよく理解しようとしています。

私は以下のコードを持っています ( http://jsfiddle.net/BfZEv/1/のライブデモ)

ブロックのリストがあり、display:inline のスタイルを設定します。なぜ彼らはインラインではないのですか?

次に、インラインブロックを試してみましたが、うまくいきました。インラインブロックの説明を読んで、私はそれがうまくいくとは思っていなかったでしょう。私はそれを正しく使用していますか

その後、最終的なリストを試してみたところ、探していた外観がほぼ得られました。1行は欲しいのですが、「Hello」ごとに背景画像を表示したかったのです。手伝ってくれますか？

ありがとう

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>Untitled</title>
        <style type="text/css">
            .main-ul-bad > li {
                list-style-type: none;
                display:inline
            }
            .main-ul > li {
                list-style-type: none;
                display:inline-block
            }
            div.div1 {
                display:inline-block
            }
            .main-ul > li div ul {
                display: none;
            }
            span.background {
                background-image: url("dropdown_arrow_blue.gif");
                background-repeat: no-repeat;
            }
        </style>
    </head>
    <body>
        <ul class="main-ul-bad">
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
        </ul>

        <ul class="main-ul">
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
            <li><div>Hello</div></li>
        </ul>

        <ul class="main-ul">
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
            <li>
                <span>Label</span>
                <div class="div1">
                    <div class="div2"><span class="text">Hello</span><span class="background"></span></div>
                    <ul>
                        <li>Hello</li>
                        <li>Hello</li>
                        <li>Hello</li>
                    </ul>
                </div>
            </li>
        </ul>
    </body>
</html>
4

2 に答える 2

1

各リストアイテム内にデフォルトでブロックがあるため、最初のリストmain-ul-badはインラインで表示されません。divdivを削除するか作成するinlineと、1行に表示されます。

http://jsfiddle.net/BfZEv/6/

私は、より一般的で、おそらく適切な、水平リストを作成する方法は、それらをフロートさせることだと信じています。

<ul class="main-ul-bad">
    <li><div>Hello</div></li>
    <li><div>Hello</div></li>
    <li><div>Hello</div></li>
</ul>

css：

.main-ul-bad {
    width: 500px;
}

.main-ul-bad > li {
    list-style-type: none;
    float: left;
    margin: 5px;
}

1行に必要な数のアイテムを収容できる幅をリストに指定し、アイテムをフロートさせます。

于 2012-10-31T16:53:55.180 に答える
1

<div>-sinline-blockだけでなく、 -s も作成する必要があります<li>- DEMO

そして、それぞれの後に画像を追加できます：

.main-ul-bad > li {
    list-style-type: none;
    display: inline;
}

.main-ul-bad > li div {
    display: inline-block;
    margin-right: 30px;
    position: relative;
}

.main-ul-bad > li div:after {
    content: url(http://lorempixel.com/20/20);
    height: 20px;
    width: 20px;
    display: block;
    position: absolute;
    top: 0;
    right: -20px;
}
于 2012-10-31T16:54:11.920 に答える