2つのインラインブロックを同じ行に左右に揃えます。

Question

2つのインラインブロックを整列させて、1つは残し、もう1つは同じ行に配置するにはどうすればよいですか？なぜこれはとても難しいのですか？これを達成するためにそれらの間のスペースを消費できる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; 
} 

右隣同士にThery'reが、私は右側にnavをしたいです。

Answer 1

編集：私はこの質問に答え以来 3年が経過していると私はより近代的な解決策が必要とされていると思い、現在の1が事:)

1. Flexbox

を行いますが、それははるかにです最短で最も柔軟性があります。親コンテナにdisplay: flex;を適用し、このようなjustify-content: space-between;によってその子の配置を調整します

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

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

注意がflexbox supportは、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の部分を追加し、内容を正当化しました。

after疑似要素で挿入された余分なスペースの問題を解決するには、親要素の場合はを0に設定し、子要素の場合は14pxに戻すというトリックを行うことができます。このトリックの実施例をここで見ることができます：http://jsfiddle.net/skip405/NfeVh/326/

Answer 2

それが浮く与える：右とH1フロート：左と明確に要素を置く：それらの後の両方。

Answer 3

画面が小さすぎるときにJavaScriptを使用している場合（ヘッダーのコメントごとに）、JavaScriptを使用して浮動小数点数/マージンを取り消すだけで浮動小数点数とマージンを使用するのはなぜですか通常は。

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

Answer 4

あなたは、浮動小数点数を使用したくないあなたの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; 
} 

あなたはもう少しする必要があるかもしれませんが、それはスタートです。

Answer 5

に@ skip405の答えを活かし、私はそれのためのサスのミックスインを作った：

@mixin inline-block-lr($container,$left,$right){ 
    #{$container}{   
     text-align: justify; 

     &:after{ 
      content: ''; 
      display: inline-block; 
      width: 100%; 
      height: 0; 
      font-size:0; 
      line-height:0; 
     } 
    } 

    #{$left} { 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #{$right} { 
     display: inline-block; 
     vertical-align: middle; 
    } 
} 

それは3つのパラメータを受け入れます。コンテナ、左と右の要素。 例えば、質問にフィットするように、あなたはこのようにそれを使用することができます。

@include inline-block-lr('header', 'h1', 'nav'); 

Answer 6

私はこれまで一つの可能​​な解決策は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/

Answer 7

のために両方の要素が使用されます。

display: inline-block; 

for the 'nav' element use

float: right;