2つのインラインブロックを同じ行で左揃えおよび右揃え

2つのインラインブロックを揃えて、1つを左に、もう1つを同じ線上に配置するにはどうすればよいですか？なぜこれがそんなに難しいのですか？これを達成するためにそれらの間のスペースを消費する可能性のあるLaTeXの\ hfillのようなものはありますか？

インラインブロックではベースラインを揃えることができるため、フロートを使用したくありません。そして、ウィンドウが両方に対して小さすぎる場合、インラインブロックを使用して、text-alignを中央に変更するだけで、上下に中央揃えになります。相対（親）+絶対（要素）の配置には、フロートと同じ問題があります。

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は隣り合っていますがnav、右側に配置します。

編集：私がこの質問に答えてから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パートを追加して、内容を正当化しました。

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

@ skip405の回答を利用して、Sassのミックスインを作成しました。

@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');

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

<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;
}

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

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

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

私はこの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/

アイテムを正しく配置するための新しい方法：

グリッド：

.header {
        display:grid;
        grid-template-columns: 1fr auto;
    }

デモ

ブートストラップ4.右揃え：

<div class="row">
      <div class="col">left</div>
      <div class="col">
          <div class="float-right">element needs to be right aligned</div>
      </div>
</div>

デモ

親の左中央と右を表示しています。3つ以上の要素がある場合は、nth-child（）を使用します。

HTMLサンプル：

<body>
    <ul class="nav-tabs">
        <li><a  id="btn-tab-business" class="btn-tab nav-tab-selected"  onclick="openTab('business','btn-tab-business')"><i class="fas fa-th"></i>Business</a></li>
        <li><a  id="btn-tab-expertise" class="btn-tab" onclick="openTab('expertise', 'btn-tab-expertise')"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a  id="btn-tab-quality" class="btn-tab" onclick="openTab('quality', 'btn-tab-quality')"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

CSSサンプル：

.nav-tabs{
  position: relative;
  padding-bottom: 50px;
}

.nav-tabs li {
  display: inline-block;  
  position: absolute;
  list-style: none;
}
.nav-tabs li:first-child{
  top: 0px;
  left: 0px;
}
.nav-tabs li:last-child{
  top: 0px;
  right: 0px;
}
.nav-tabs li:nth-child(2){
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}

float：rightとh1 float：leftを指定し、その後にclear：bothの要素を置きます。

両方の要素に使用

display: inline-block;

「nav」要素の使用

float: right;