17

このような単純なWebページを考えてみましょう。

<!DOCTYPE html>
<html><head><title>Test!</title></head>
<body>
<p>a b c</p>
</body></html>

TeXで書いたかのようにabcをフォーマットしたいのですが。a\hfill b\hfill cこれは次のとおりです。aが左側、次にbが中央、次にcが右側。すべて同じ行にあります。これどうやってするの？

4

1 に答える 1

14

これをどのように行うかは、実際にここにコンテンツがある場合の間隔をどのようにするかによって大きく異なります。これらの手法はどのタグでも機能します。簡単にするために、ここでリストを選択しました。とを使用している場合は、pとにspan置き換えulてください。plispan

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>

これらの3つの手法はすべて、ソースの順序を変更せずに機能します。フロートはその仕事をすることができますが、それが正しく機能するためには、bの前にcを配置する必要があります。

この手法はフレックスボックスを使用し、a、b、およびcを含む要素がそれらを含むのに十分な大きさであり、それらの間のスペースが等しいことを前提としています（aがbより大きい場合、bは中央に配置されません）。Flexboxには、折り返しに関する動作を決定するための多くのオプションがありますが、デフォルトではまったく折り返しません。

http://jsfiddle.net/4g8NY/1/（プレフィックスは含まれていません）

ul {
    display: flex;
    justify-content: space-between;
}

Flexboxは、IE10がそれをサポートする最初のIEバージョンであるという事実のために、現時点ではあまり広くサポートされていません。 http://caniuse.com/#search=flexbox

このdisplay: tableファミリをtext-alignmentと一緒に使用して、要素が目的の方法で分散されているように見せることができますが、それらのコンテナは親の幅の33％を占めます。この例では、実際のコンテンツに関係なく、bは完全に中央に配置されたままである必要があります。要素も同じ高さであり、何があっても同じ行に表示されるように強制されます。

他の手法とは異なり、これは3つの要素のみが存在することを前提としています。要素を追加するたびに、列の幅を変更し、どの列がどの配置になるかを調整する必要があります。

http://jsfiddle.net/4g8NY/2/

ul {
    display: table;
    width: 100%;
}

li {
    display: table-cell;
    width: 33%;
}

li:nth-child(2) {
    text-align: center;
}

li:last-child {
    text-align: right;
}

すべてのプロパティがIE8で利用できるため、この手法のサポートは非​​常に優れています（IE8は私の公式のカットオフであり、IE7以前は「サポートされているブラウザー」とは見なされません）。

3番目の手法では、親要素の最後の行として疑似要素を使用して、a、b、およびcを正当化できるようにします。要素が同じ行に収まらない場合、この手法で折り返しを防ぐ方法はありません。

他の手法とは異なり、追加のマークアップは必要ありません。これはp、サンプルコードにすでにあるようなタグである可能性があります。

http://jsfiddle.net/4g8NY/3/

ul {
    text-align: justify;
}

ul:after {
    content: " ";
    display: inline-block;
    width: 100%;
}

li {
    display: inline; /* if you're using an element that's already `inline` like a span, you don't need this */
}

上記の手法と同様に、IE8以降で動作します。

于 2013-02-17T14:03:39.730 に答える