☰

インラインブロックをクリアしますか? 質問する

tag-icon • tag-icon html css
インラインブロックをクリアしますか? 質問する

私は持っている

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}

それから

<div class="centered-holder">misc content 1</div>
<div class="centered-holder">misc content 2</div>
<div class="centered-holder">misc content 3</div>

1 行に最大 1 つだけ表示したいのですが、これは実際に可能ですか? これは iPhone HTML5 アプリなので、古いブラウザの制限は問題になりません。

ベストアンサー1

CSS 宣言とマークアップによって異なりますが、次の CSS 宣言を親コンテナーに配置してみてください。

white-space: pre-line;

このアプローチを使用すると、 をブロック要素に変換する必要がなくなり.centered-holder、text-align:center親コンテナーで などを引き続き使用できます。

プレライン- この値により、空白のシーケンスが 1 つのスペース文字に折りたたまれます。行ボックスを埋めるために必要な場所、およびマークアップ内の新しい行 (または生成されたコンテンツ内の "\a" の出現箇所)​​ で改行が行われます。つまり、明示的な改行を尊重すること以外は通常と同じです。

空白に関する詳しい情報は、こちらをご覧ください:

最後に、次の CSS 宣言を使用できます。

.parent-container {
    white-space: pre-line /* Create new line for each DIV */;
    line-height:0 /* Mask the extra lines */;
    *white-space: pre /*FixIE7*/;
    *word-wrap: break-word /*FixIE7*/;
}

.centered-holder {
    display: inline-block;
    line-height:100% /* Restore a default line-height */;
    *display: inline /*FixIE7*/;
    *zoom: 1 /*FixIE7*/;
}

この質問は非常に興味深いと思ったので、IE6-7 の CSS 宣言 (pre-lineおよびinline-block修正) も提供します。同様の問題を抱えている他の人にも役立つはずです。

おすすめ記事