CSS ausgerichtet

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

Flex-Box-Modell Flex ist eine leistungsstarke elastische Layoutmethode, die die meisten Layouts aufnehmen kann Zu den Effekten gehört natürlich auch die Ausrichtung. Sie können das Ausrichtungsattribut der Hauptachse verwenden justify-content space-between

justify-content: space-between;

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

 [ Hinweis] IE9-Browse Der Implementierer unterstützt keine

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

können beide Enden ausgerichtet werden, die Kompatibilität ist jedoch nicht gut. Durch Festlegen des Pseudoelements text-align-last auf das übergeordnete Element, Festlegen von :after auf das Pseudoelement und Festlegen der Breite auf 100 % entspricht dies dem Zusammendrücken des Pseudoelements inline-block in der zweiten Zeile. Infolgedessen belegt das ursprüngliche Element die erste Zeile, was den Effekt der Ausrichtung beider Enden auslöst :after

und Überlaufversteckung, um das Problem redundanter Zeilenumbrüche zu lösen 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>

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

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

, 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>