Richten Sie zwei Inline-Blöcke links und rechts auf derselben Linie aus

Wie kann ich zwei Inline-Blöcke so ausrichten, dass einer links und der andere rechts in derselben Linie liegt? Warum ist das so schwer? Gibt es so etwas wie LaTeXs \ hfill, das den Raum zwischen ihnen verbrauchen kann, um dies zu erreichen?

Ich möchte keine Floats verwenden, da ich mit Inline-Blöcken die Baselines ausrichten kann. Und wenn das Fenster für beide zu klein ist, kann ich mit Inline-Blöcken einfach die Textausrichtung auf Mitte ändern und sie werden übereinander zentriert. Die relative (übergeordnete) + absolute (Element-) Positionierung hat dieselben Probleme wie Floats.

Der HTML5:

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

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

Sie sind direkt nebeneinander, aber ich möchte das navauf der rechten Seite.

Bearbeiten: 3 Jahre sind vergangen, seit ich diese Frage beantwortet habe und ich denke, dass eine modernere Lösung benötigt wird, obwohl die aktuelle die Sache macht :)

1. Flexbox

Es ist bei weitem das kürzeste und flexibelste. Wenden Sie dies display: flex;auf den übergeordneten Container an und passen Sie die Platzierung der untergeordneten Container folgendermaßen an justify-content: space-between;:

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

Kann hier online gesehen werden - http://jsfiddle.net/skip405/NfeVh/1073/

Beachten Sie jedoch, dass die Flexbox-Unterstützung IE10 und höher ist. Wenn Sie IE 9 oder älter unterstützen müssen, verwenden Sie die folgende Lösung:

2.Sie können die text-align: justifyTechnik hier anwenden.

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

Das Arbeitsbeispiel finden Sie hier: http://jsfiddle.net/skip405/NfeVh/4/ . Dieser Code funktioniert ab IE7

Wenn Inline-Block-Elemente in HTML nicht durch Leerzeichen getrennt sind, funktioniert diese Lösung nicht - siehe Beispiel http://jsfiddle.net/NfeVh/1408/ . Dies kann der Fall sein, wenn Sie Inhalte mit Javascript einfügen.

Wenn uns IE7 egal ist, lassen Sie einfach die Star-Hack-Eigenschaften weg. Das Arbeitsbeispiel mit Ihrem Markup finden Sie hier - http://jsfiddle.net/skip405/NfeVh/5/ . Ich habe gerade den header:afterTeil hinzugefügt und den Inhalt begründet.

Um das Problem des zusätzlichen Leerzeichens zu lösen, das mit dem Pseudoelement eingefügt wird, afterkann man einen Trick font-sizeausführen, indem man das für das übergeordnete Element auf 0 setzt und es für die untergeordneten Elemente auf 14px zurücksetzt. Das Arbeitsbeispiel für diesen Trick finden Sie hier: http://jsfiddle.net/skip405/NfeVh/326/

Ich habe die Antwort von @ skip405 genutzt und ein Sass-Mixin dafür erstellt:

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

Es akzeptiert 3 Parameter. Der Container, das linke und das rechte Element. Um die Frage zu beantworten, können Sie sie beispielsweise folgendermaßen verwenden:

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

Wenn Sie keine Floats verwenden möchten, müssen Sie Ihr Navi einwickeln:

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

... und fügen Sie einige spezifischere CSS hinzu:

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

Möglicherweise müssen Sie etwas mehr tun, aber das ist ein Anfang.

Wenn Sie bereits JavaScript verwenden, um Inhalte zu zentrieren, wenn der Bildschirm zu klein ist (gemäß Ihrem Kommentar für Ihre Kopfzeile), können Sie Floats / Ränder mit JavaScript rückgängig machen, während Sie gerade dabei sind, und Floats und Ränder normal verwenden.

Sie können sogar CSS-Medienabfragen verwenden, um die Menge an JavaScript zu reduzieren, die Sie verwenden.

Ich denke, eine mögliche Lösung hierfür ist die Verwendung von 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/

Neue Möglichkeiten, Elemente richtig auszurichten:

Gitter :

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

Demo

Bootstrap 4. Richtig ausrichten :

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

Demo

Anzeige der linken Mitte und rechts der Eltern. Wenn Sie mehr als 3 Elemente haben, verwenden Sie nth-child () für diese.

HTML-Beispiel:

<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-Beispiel:

.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%);
}

Geben Sie es float: right und das h1 float: left und setzen Sie ein Element mit clear: beide nach ihnen.

Für beide Elemente verwenden

display: inline-block;

das für das 'nav' Element verwenden

float: right;