Detaillierte Erklärung, wie CSS die Ausrichtung an beiden Enden erreicht

Vorherige Wörter

  Die Ausrichtung an beiden Enden wird sehr häufig bei der Erstellung von Navigationsnavigation verwendet. In diesem Artikel werden die drei Implementierungsmethoden der CSS-Ausrichtung an beiden Enden ausführlich vorgestellt

Flex

 Flexibles BoxmodellFlex ist eine leistungsstarke elastische Layoutmethode, die die meisten Layouts aufnehmen kann Zu den Effekten gehört natürlich auch die Ausrichtung. Sie können die Hauptachsenausrichtung verwenden, um beide Enden von nur<a href="http://www.php.cn/wiki/109.html" target="_blank">wenn<code>just<a href="http://www.php.cn/wiki/109.html" target="_blank">if</a>y-contenty-Inhalt Attributespace-between

justify-content: space-between;

 Wenn Sie die Kompatibilität der drei Versionen von Flex berücksichtigen möchten, verwenden Sie den folgenden Code

 [Hinweis ] IE9-Browser unterstützt nicht

.justify-content_flex-justify{
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;}
.in{background-color: lightblue;padding: 0 10px;}
.display_flex{display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
.display_flex > *{display: block;}
.justify-content_flex-justify{-webkit-box-pack: justify;-ms-flex-pack: justify;-webkit-justify-content: space-between;justify-content: space-between;}
</style>
<ul class="list display_flex justify-content_flex-justify">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>
</ul>

text-align

 Horizontale Ausrichtung text-align selbst hat einen Attributwert zum Ausrichten beider Enden justify. Es ist jedoch zu beachten, dass Sie bei der Verwendung zur Ausrichtung an beiden Enden darauf achten müssen, Leerzeichen (einschließlich Leerzeichen, Zeilenumbrüche und Tabulatoren) zwischen den Elementen einzufügen, damit es funktioniert. Da es in der HTML-Struktur Zeilenumbrüche zwischen <li>-Elementen gibt, müssen keine zusätzlichen Leerzeichen hinzugefügt werden

 Aber einfach so kann das Element nicht den Effekt erzielen, beide Enden auszurichten

 Das Element muss ausgefüllt sein. Eine Zeile reicht aus, wie unten gezeigt. Elemente, die eine Zeile ausfüllen, können an beiden Enden ausgerichtet werden, während Elemente, die keine Zeile ausfüllen, nicht ausgerichtet werden können

[text-align-last]

 Offensichtlich trifft keine der oben genannten Situationen zu die Anforderungen. Zu diesem Zeitpunkt müssen Sie das Attribut text-align-last verwenden, das verwendet wird, um anzugeben, wie die letzte Textzeile

ausgerichtet werden soll. Ersetzen Sie also das Attribut text-align durch text-align-last. Um jedoch mit dem IE-Browser kompatibel zu sein, müssen Sie gleichzeitig text-align:justify

festlegen – [Hinweis] Safari-Browser, IOS, androis4.4-Browser unterstützen

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;text-align-last: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
</style>
<ul class="list ">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

【nach Pseudoelement】

 Die Verwendung von

kann den Effekt der Ausrichtung beider Enden erzielen, aber die Kompatibilität ist nicht gut. Durch Festlegen des Pseudoelements <a href="http://www.php.cn/wiki/978.html" target="_blank">:after<code>text-align-last auf das übergeordnete Element und es pseudo machen Das Element wird auf <a href="http://www.php.cn/wiki/978.html" target="_blank">:after</a> und die Breite auf 100 % gesetzt, was dem Pseudoelement inline-block entspricht, das in die zweite Zeile gequetscht wird. Infolgedessen belegt das ursprüngliche Element die erste Zeile und löst den Ausrichtungseffekt :after

  aus. Hier ist zu beachten, dass Sie die Höhe des übergeordneten Elements festlegen können, da der Leerraum als neue Zeile analysiert wird

und das Ausblenden von Überläufen, um das Problem redundanter Zeilenumbrüche height

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;height: 30px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: justify;}
.in{background-color: lightblue;padding: 0 10px;display:inline-block;}
.list:after{content:"";width:100%;display:inline-block;}
</style>
<ul class="list ">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

Spalte

zu lösen. Ähnliche Effekte können auch mit einem mehrspaltigen Layout

erzielt werden. column definiert die Anzahl der Spalten des Elements. Im Beispiel gibt es 3 Unterelemente, daher ist es als 3 Spalten definiert. Besonderes Augenmerk sollte auf die Tatsache gelegt werden, dass die untergeordneten Elemente zu diesem Zeitpunkt als Blockelemente festgelegt werden müssen, um wirksam zu werden column-count

 [Hinweis] IE9-Browser unterstützt nicht

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

 If Sie müssen es zwischen untergeordneten Elementen verwenden. Vertikale Linien. Wenn die Höhe der vertikalen Linie mit der Höhe des untergeordneten Elements übereinstimmt, verwenden Sie

, um die Anforderungen bequem umzusetzen column-rule

<style>
body{margin: 0;}    
ul{margin: 0;padding: 0;list-style: none;}
.list{width: 200px;overflow: hidden;border: 1px solid gray;background-color: lightgreen;line-height: 30px;text-align: center;}
.col3{-webkit-column-count:3;-moz-column-count:3;column-count:3;}
.col-rule{-webkit-column-rule: 1px solid black;-moz-column-rule: 1px solid black;column-rule: 1px solid black;}
.in{background-color: lightblue;padding: 0 10px;display:block;}
</style>
<ul class="list col3 col-rule">
    <li class="in">内容</li>
    <li class="in">样式</li>
    <li class="in">行为</li>  
</ul>

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie CSS die Ausrichtung an beiden Enden erreicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!