1

私はこのように見えるdivを次々に持っています。

<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....


(in CSS)

.tag {
    display:inline
}

私はそれらの数が多すぎて、途中で壊れ始めていることに気づきました。私はそれを望んでいません。

しかし、このようにノーラップを設定すると

.tag {
    display:inline;
    white-space:nowrap;
}

それらはすべて1行にあり、ウィンドウの100％以上を占めています。私はそれを望んでいません。

私が欲しいもの：1行にこれらのdivが多すぎると、divのリストが壊れる可能性がありますが、div自体は壊れません。途中でdivを壊したくないだけです。

はっきり言っていただければ幸いです。

4

3 に答える 3

1

私が正しく理解しているなら、あなたは彼らが左右に横になり、そして行がいっぱいになったときに新しい行にブレークすることを望みますが、divの真ん中ではありません。

あなたに必要なのは

.tag {
    float: left;
}

デモについては、ここのフィドルを参照してください。

padding-left: 5px;それらの間にスペースが必要な場合は、追加することもできます。

于 2013-02-07T08:28:22.480 に答える
0 
.tag {
    display:inline;
    white-space:nowrap;
    float:left;
}

それはうまくいった。（そして、その下にclear：bothを使用して空のdivを「クリア」することを追加します。）

于 2013-02-07T08:27:13.373 に答える
0

サポートする必要がある/サポートしたいブラウザによっては、

.tag {
    display:inline-block;
    vertical-align:top;
}

より良い解決策。これ<div>を適用したいので、IE5-7のスタイルはそのままでは機能しません。http： //www.quirksmode.org/css/display.html#t03を参照してください。もちろん回避策があります-IE6でdisplay：inline-blockを修正する方法は？-それらのブラウザで使用したい場合。

の利点は、フロートされたコンテンツをinline-block必要としないことclearと、要素が通常のフローからレンダリングされないことです。私の経験では、レイアウトの問題を引き起こしているため、可能な限りフローティング要素を避けようとしています。

ただし、このアプローチにはいくつかの潜在的な問題があります。vertical-align:topルールを追加することで、その1つにすでに対処しました。これが発生する理由については、以前の回答を参照してください-https://stackoverflow.com/a/12950536/637889

もう1つは、要素間の不要な空白が原因である可能性があります。これを回避するいくつかの巧妙な方法については、 http：//css-tricks.com/fighting-the-space-between-inline-block-elements/inline-blockを参照してください。

于 2013-02-07T11:15:23.867 に答える