127

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、右側が欲しい。

ダイアグラム

4

9 に答える 9

165

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

1.フレックスボックス

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

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

ここでオンラインで見ることができます - http://jsfiddle.net/skip405/NfeVh/1073/

ただし、flexbox のサポートは 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 を気にしない場合は、単に star-hack プロパティを省略してください。マークアップを使用した実際の例は、http://jsfiddle.net/skip405/NfeVh/5/です。部分を追加しheader:afterて内容を正当化しただけです。

擬似要素で挿入される余分なスペースの問題を解決するために、親要素の を 0 に設定し、子要素の 14px にリセットするafterトリックを実行できます。font-sizeこのトリックの実際の例は、http: //jsfiddle.net/skip405/NfeVh/326/で見ることができます。

于 2012-04-23T08:33:26.367 に答える
3

フロートを使用したくない場合は、nav をラップする必要があります。

<header>
<h1>Title</h1>
<div id="navWrap">
<nav>
    <a>A Link</a>
    <a>Another Link</a>
    <a>A Third Link</a>
</nav>
</div>
</header>

...さらに具体的な css を追加します。

header {
//text-align: center; // will set in js when the nav overflows (i think)
width:960px;/*Change as needed*/
height:75px;/*Change as needed*/
}

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

#navWrap{
position:absolute;
top:50px; /*Change as needed*/
right:0;
}

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

もう少しやる必要があるかもしれませんが、それが始まりです。

于 2012-04-22T22:33:30.457 に答える
1

画面が小さすぎるときに（ヘッダーのコメントに従って）JavaScriptを使用してコンテンツを中央に配置している場合は、JavaScriptでフロート/マージンを元に戻し、通常どおりフロートとマージンを使用してください。

CSSメディアクエリを使用して、使用しているJavaScriptの量を減らすこともできます。

于 2012-04-22T22:26:37.330 に答える
1

これに対する1つの可能な解決策は、次を使用することだと思いますdisplay: table：

.header {
  display: table;
  width: 100%;
  box-sizing: border-box;
}

.header > * {
  display: table-cell;
}

.header > *:last-child {
  text-align: right;  
}

h1 {
  font-size: 32px;
}

nav {
  vertical-align: baseline;
}

JSFiddle: http://jsfiddle.net/yxxrnn7j/1/

于 2016-05-11T07:16:17.127 に答える
0

float：rightとh1 float：leftを指定し、それらの後にclear：bothを付けた要素を配置します。

于 2012-04-22T22:22:08.950 に答える