2

ここにあるすべての質問から、ほとんどの人は div (または lis など) で水平方向のスペースを埋めたいと思っていると思います。必要なだけ長くしてほしい。ここで、それらは水平スペースを埋めます:

http://jsfiddle.net/nnFpN/

UL 要素に display:inline-block を持たせることで水平方向に縮小できますが、LI を inline-block に配置すると、並べて表示されるようになり、これは私が望むものではありません。LI を必要なだけ広くしたいのです。

また、div (または ul や li など) が水平方向のスペースを埋める必要があるのはいつですか?

html:

<div id="center_main">
    <div id="data_box" class="center_box">
        <ul id="keys">
            <li class="key">key1</li>
            <li class="key">key1 . key2</li>
            <li class="key">key1 . key3</li>
            <li class="key">key1 . key3 . key4</li>
            <li class="key">key5</li>
        </ul>
    </div>
</div>

css: (重複してすみません。layout.css と colors.css の 2 つの異なるファイルからのものです)

#center_main {
    margin: 25px auto;
}

.center_box {
    margin: 10px 0px;
    padding: 3px;
}

#keys {
    padding: 0px;
    margin: 0px 2px;
}

#keys li {
    padding: 1px 3px;
    margin: 3px 0px;
}

body {
    background-color: #F1F1F1;
    color: #333333;
}

.center_box {
    background-color: #FFFFFF;
    box-shadow: 0 0 10px #333333;
    border-radius: 4px;
    border: 0px solid #3981EC;
    border-width: 4px 0px 0px 0px;
}

#keys {
    list-style: none;
}

#keys li {
    background-color: #666666;
    color: #FFFFFF;
    border-radius: 4px;
}

#keys li:hover{
    background-color: #3981EC;
}
4

4 に答える 4

1

Div は、ブロックレベル要素と呼ばれる要素の一種です。ブロック レベルの要素は、デフォルトでスタイル プロパティdisplay:block;を持っているため、コンテナの水平方向のスペースをすべて埋めます。.

ブロック レベルの要素をそのコンテンツ (別名inline-level ) のみに展開するには、その css プロパティをdisplay: inlineに設定します。
これが問題の解決策です。
2 番目の質問(いつ div で水平方向のスペースを埋める必要があり、いつ埋めてはならないか)については、それがあなたの呼びかけです。ブロック レベルの要素をインラインにすることも、その逆も可能です。

そうは言っても、div または p 要素をインライン レベルの要素にするのは悪い設計です。単にスパンを使用できますまたはそのための他のインラインレベルのコンテナ。通常の例外は、liを使用する場合です。Li はブロックレベルですが、水平にしてフロート

させ たくない場合は、インラインにすることができます。そうすることで、各 Li はその内容と同じ幅しか持たなくなることに注意してください。さらに、インライン レベルの要素にはパディングを設定できません。 お役に立てれば。


于 2013-07-20T21:30:53.497 に答える
0


float:left; clear:both;
リスト要素ごとに試すことができ ます。

そして、それらがいつ横のスペースを埋めるかについては、それらを表示する方法によって異なります. display:block 要素は、そのコンテンツに関係なく、幅全体を声に出して塗りつぶします。設定すると、設定した正確な幅になります。inline-block と inline は、正確な幅が指定されていない限り、コンテンツのスペースを占有し、スペースがなくなるまで水平に並べようとするという点で、同様に間隔が空けられます。

于 2013-07-20T21:18:09.460 に答える