it-swarm.com.de

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

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

Ich möchte keine Floats verwenden weil ich mit Inline-Blöcken die Basislinien ausrichten kann. Und wenn das Fenster für beide zu klein ist, kann ich bei Inline-Blöcken einfach die Textausrichtung in die Mitte ändern, und sie werden aufeinander zentriert. Relative (übergeordnete) + absolute (Element) Positionierung hat die gleichen Probleme wie Floats.

Das HTML5:

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

Die 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 die nav auf der rechten Seite.

a diagram

91
mk12

Edit: 3 Jahre sind vergangen, seit ich diese Frage beantwortete und ich denke, dass eine modernere Lösung erforderlich ist, obwohl die aktuelle die Sache erledigt :)

1. Flexbox

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

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

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

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

2.Sie können hier die text-align: justify-Technik verwenden.

.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 ist hier zu sehen: http://jsfiddle.net/skip405/NfeVh/4/ . Dieser Code funktioniert ab IE7

Wenn Inline-Block-Elemente in HTML nicht durch Leerzeichen getrennt werden, 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 wir uns nicht für IE7 interessieren, lassen Sie einfach die Star-Hack-Eigenschaften weg. Das Arbeitsbeispiel für Ihr Markup ist hier - http://jsfiddle.net/skip405/NfeVh/5/ . Ich habe gerade den header:after-Teil hinzugefügt und den Inhalt begründet.

Um das Problem des zusätzlichen Speicherplatzes zu lösen, der mit dem Pseudoelement after eingefügt wird, können Sie den font-size für das übergeordnete Element auf 0 setzen und ihn wieder auf 14px für die untergeordneten Elemente setzen. Das Arbeitsbeispiel für diesen Trick ist hier zu sehen: http://jsfiddle.net/skip405/NfeVh/326/

119
skip405

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

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

Wenn Sie keine Schwimmer verwenden möchten, müssen Sie Ihr Navi einpacken:

<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üge 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.

3
maiorano84

Wenn Sie bereits JavaScript zum Zentrieren von Elementen verwenden, wenn der Bildschirm zu klein ist (wie in Ihrem Kommentar für Ihre Kopfzeile angegeben), warum sollten Sie nicht einfach Floats/Ränder mit JavaScript rückgängig machen, während Sie gerade dabei sind, und Floats und Ränder normalerweise verwenden.

Sie können sogar CSS-Medienabfragen verwenden, um den JavaScript-Anteil zu reduzieren.

1
jdhartley

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/

0
robd

Neue Möglichkeiten, Elemente richtig auszurichten:

Gitter :

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

Demo

Bootstrap 4. Rechts 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

0
Ievgen Naida

Für beide Elemente verwenden

display: inline-block;

das für das 'nav'-Element verwenden

float: right;
0
Sammy Aguns