automatische Spalten, um jede LI von UL in einer einzigen Zeile zu rechtfertigen

Ich habe eine ungeordnete Liste mit einer Anzahl von Listenelementen. Ich kenne nicht die genaue Anzahl von li Elementen in besagtem ul - zB könnte es entweder 3 oder 4 Elemente sein (alle sehr prägnanten) - aber ich display jeweils li als block (nicht als eine tatsächliche Liste), und möchten die columns-Funktion verwenden, um alles auf eine Zeile zu setzen, die ebenfalls zentriert/ausgerichtet ist.automatische Spalten, um jede LI von UL in einer einzigen Zeile zu rechtfertigen

Wenn ich jedoch columns: 4 mache und nur 3 Elemente habe, werden sie angezeigt, als ob ein viertes Element fehlt. Gibt es eine Möglichkeit, dass sie so angezeigt werden, als ob columns: 3 angegeben wurde? (Ich habe versucht, Spalten auto Einstellung, aber es schien nichts im Browser zu tun, die ich getestet habe.)

Grundsätzlich möchte ich die columns CSS-Eigenschaft von ul auf die Anzahl der li Kinder festgelegt werden, dass die ul hat in CSS.

Quelle

2017-09-11 cnst

zeigen Ihnen, was Sie bisher getan haben? –

@ShadowFiend, es ist [hier] (http://reg.su/?SO/46148121); Ich möchte ein viertes Element je nach Bedingung hinzufügen, aber habe statische CSS, die mit 3 oder 4 Elementen gleich gut funktioniert – cnst

ich meine den Code? –

Durch Ändern der Anzeigeeigenschaft von li-Element können Sie dieses (3 oder 4 lis) Zentrum an Ihrem Fenster ausrichten.

ul#registrar { 
 
    text-align: center; 
 
} 
 
ul#registrar li { 
 
    display: inline-block; 
 
}

<ul id="registrar"> 
 
<li><a href="/reg.com">reg.com</a></li> 
 
<li><a href="/reg.ru">reg.ru</a></li> 
 
<li><a href="/nic.ru">nic.ru</a></li><li><a href="/nic.ru">nic.ru</a></li> 
 
</ul>

Quelle

2017-09-11 04:59:14 Anuresh

Ich sehe; sieht aus wie 'inline-block', zusammen mit https://stackoverflow.com/a/12198561/1122270, sollte den Trick machen. (Aber an sich funktioniert Ihr Code nicht wie erwartet - wie ich will, dass jedes 'li' gleichmäßig verteilt ist.) – cnst

So haben Sie inline-block versucht mit [oben genannten Link] (https://stackoverflow.com/questions/8720931/can-css-detect-die-Anzahl-von-Kindern-ein-Element-hat/12198561 # 12198561)? – Anuresh

automatische Spalten, um jede LI von UL in einer einzigen Zeile zu rechtfertigen

Antwort

Verwandte Themen