Wie kann ich Inline-Blöcke links und rechts in einer Zeile ausrichten?

Inline-Blöcke links und rechts auf einer einzelnen Linie ausrichten

Bei der Arbeit mit Inline-Blöcken kann es schwierig sein, sie genau auszurichten in einer einzigen Zeile. Dieser Artikel bietet zwei Lösungen für dieses Problem: Flexbox und Textausrichtung.

Flexbox-Lösung

Flexbox bietet eine elegante und prägnante Lösung. Durch Anwenden von display: flex; zum übergeordneten Container und justify-content: space-between; Um die untergeordneten Elemente auszurichten, können Sie ganz einfach die gewünschte Ausrichtung erreichen.

<code class="css">.header {
  display: flex;
  justify-content: space-between;
}</code>

Textausrichtungs-Ausrichtungslösung

Die Verwendung von Textausrichtungsausrichtung ist eine weitere praktikable Option. Hier ist ein Beispiel-CSS-Code, der die Technik mit einigen browserspezifischen Hacks für eine bessere Kompatibilität kombiniert:

<code class="css">.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;
}</code>

Dieser Ansatz funktioniert gut in verschiedenen Browsern, einschließlich IE7 und höher.

Denken Sie daran, wenn Wenn Inline-Block-Elemente nicht durch Leerzeichen getrennt sind, funktioniert die Textausrichtungslösung möglicherweise nicht. Darüber hinaus kann das Festlegen der Schriftgröße des übergeordneten Elements auf 0 und das Zurücksetzen auf einen gewünschten Wert für untergeordnete Elemente dazu beitragen, zusätzlichen Platz zu entfernen, der durch das After-Pseudoelement entsteht.

Das obige ist der detaillierte Inhalt vonWie kann ich Inline-Blöcke links und rechts in einer Zeile ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!