☰

2つのインラインブロックを同じ行の左と右に揃える 質問する

tag-icon • tag-icon css html
2つのインラインブロックを同じ行の左と右に揃える 質問する

2 つのインライン ブロックを、一方が左、もう一方が右になるように揃えるにはどうすればよいでしょうか。これはなぜ難しいのでしょうか。これを実現するために、それらの間のスペースを消費できる LaTeX の \hfill のようなものはありますか。

フロートを使いたくないインライン ブロックを使用すると、ベースラインを揃えることができるからです。また、ウィンドウが小さすぎて両方を表示できない場合は、インライン ブロックを使用して、テキスト配置を中央に変更するだけで、中央に配置されます。相対 (親) + 絶対 (要素) 配置には、フロートと同じ問題があります。

HTML5:

<header>
    <h1>Title</h1>
    <nav>
        <a>A Link</a>
        <a>Another Link</a>
        <a>A Third Link</a>
    </nav>
</header>

CSS:

header {
    //text-align: center; // will set in js when the nav overflows (i think)
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

nav {
    display: inline-block;
    vertical-align: baseline;
}

それらは隣り合っていますが、nav右側のものが欲しいです。

図

ベストアンサー1

編集：この質問に答えてから 3 年が経ちました。現在のソリューションでも問題は解決しますが、より現代的なソリューションが必要だと思います :)

1.フレックスボックス

これは、これまでで最も短く、最も柔軟性の高い方法です。display: flex;親コンテナーに適用し、次のようにして子コンテナーの配置を調整しますjustify-content: space-between;。

.header {
    display: flex;
    justify-content: space-between;
}

オンラインではこちらからご覧いただけます -http://jsfiddle.net/skip405/NfeVh/1073/

ただし、フレックスボックスのサポートIE10 以降です。IE 9 以前をサポートする必要がある場合は、次の解決策を使用してください。

2.text-align: justifyここでテクニックを使うことができます。

.header {
    background: #ccc; 
    text-align: justify; 

    /* ie 7*/  
    *width: 100%;  
    *-ms-text-justify: distribute-all-lines;
    *text-justify: distribute-all-lines;
}
 .header:after{
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size:0;
    line-height:0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em; 

    /* ie 7*/ 
    *display: inline;
    *zoom: 1;
    *text-align: left; 
}

.nav {
    display: inline-block;
    vertical-align: baseline; 

    /* ie 7*/
    *display: inline;
    *zoom:1;
    *text-align: right;
}

実際の例はここで見ることができます:http://jsfiddle.net/skip405/NfeVh/4/このコードはIE7以降で動作します

HTMLのインラインブロック要素がスペースで区切られていない場合、この解決策は機能しません - 例を参照してくださいhttp://jsfiddle.net/NfeVh/1408/これは、Javascript を使用してコンテンツを挿入する場合に発生する可能性があります。

IE7 を気にしないのであれば、単にスターハックプロパティを省略してください。マークアップを使用した動作例はこちらです -http://jsfiddle.net/skip405/NfeVh/5/. 部分を追加しheader:after、内容を正当化しただけです。

疑似要素によって挿入される余分なスペースの問題を解決するには、親要素の を 0 にafter設定し、子要素の を 14px などに戻すというトリックを利用できますfont-size。このトリックの実際の例を次に示します。http://jsfiddle.net/skip405/NfeVh/326/

おすすめ記事