Beispielcode zum Ausrichten von text-align:justify an beiden Enden in CSS

Verwenden Sie das Attribut „css text-align:justify;“ (Funktion besteht darin, beide Enden von Linienelementen auszurichten), um die CSS-Ausrichtung an beiden Enden zu realisieren. Klicken Sie hier, um die DEMO zu sehen: CSS-Ausrichtung an beiden Enden

Die Front-End-Recherche und Tests auf der Straße sind wie folgt:

1. CSS-Ausrichtung an beiden Enden – einzeilige Anzeige ist perfekt

2 , CSS an beiden Enden ausgerichtet - wenn bei mehreren Zeilen die Anzahl der untergeordneten Knoten gleich ist, ist es perfekt

3. CSS An beiden Enden ausgerichtet - wenn die Anzahl der untergeordneten Knoten bei mehreren Zeilen unterschiedlich ist, ist das etwas traurig

Sie können die Kompatibilität gerne testen und die Methode diskutieren der Linksausrichtung der letzten Zeile im dritten Fall

Klicken Sie hier, um die DEMO zu sehen: CSS-Ausrichtung an beiden Enden

CSS-Implementierung Die Stildatei für die zweiseitige Ausrichtung lautet wie folgt:

<style>
ul{ padding-left:0;list-style:none;margin:12px 0 24px 0;/*重置*/
width:500px;padding:0 10px;border:1px solid #ccc;/*装饰*/
font-size:0;
text-align:justify;text-justify:distribute-all-lines; /* for ie */ }
ul:after{content:”";height:0;width:100%;display:inline-block;overflow:hidden;}
ul li{width:90px;height:120px; margin:10px 0;background:#009800;
display:inline-block;vertical-align:top;
*display:inline;*zoom:1;}
ul li a{ color:#fff;}
</style>

Die CSS-Implementierung der HTML-Datei zur beidseitigen Ausrichtung lautet wie folgt:

<strong>1、单行显示很完美</strong>
<ul>
<li>ATUED</li>
<li>建站特效</li>
<li></li>
<li></li>
<li></li>
</ul>
<strong>2、多行情况下子节点数目一样的话也是很完美</strong>
<ul>
<li></li><li></li><li></li><li></li><li></li>
<li></li><li></li><li></li><li></li><li></li>
</ul>
<strong>3、多行情况下子节点数目不一样的话有点悲催</strong>
<ul>
<li>懒人建站</li>
<li></li><li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
<p>欢迎测试其兼容性，欢迎讨论第三种情况下让其最后一行左对齐的方法</p>

Front-End-Straßenabschlusstest

Übrigens können wir das verwenden Idee, beide Enden von CSS auszurichten, um eine Div+CSS-Simulationstabelle zu erstellen

Das obige ist der detaillierte Inhalt vonBeispielcode zum Ausrichten von text-align:justify an beiden Enden in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!