css - texto - ¿Cómo mostrar una lista en dos filas?
principales etiquetas de html (5)
Tengo una lista de elementos que quiero encajar en un espacio que está restringido verticalmente:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
Como no quiero que la lista tenga más de una altura específica, pero soy libre de expandirla horizontalmente, quiero dividir la lista en columnas, como esta:
One Two Three
Four Five Six
O bien, alternativamente (en mi caso el orden no es importante)
One Three Five
Two Four Six
La cuenta de column-count propiedad css permite dividir una lista en columnas, pero solo acepta un número fijo de columnas. No sé la cantidad de elementos que voy a tener (puede ir de 1 a más de 40), por lo que si configuro la cantidad de columnas en 3, cualquier lista con más de 6 elementos será demasiado alta, y si solo hay 4 elementos, solo la primera columna tendrá dos elementos y se verá desigual.
Entonces, idealmente necesitaría una propiedad de row-count , pero no existe. Supongo que también puedo hacerlo en Javascript, pero estoy buscando una solución solo para CSS.
Intenté algo: float:left en cada li pone la lista en una fila. Para dividirlo en dos filas, necesitaría no aplicar float:left al elemento N / 2. No sé cómo hacer eso.
También sé que puedo hacerlo dividiéndolo en múltiples ul , cada uno con dos li , y float:left , pero me gustaría evitar alterar el HTML para algo completamente de presentación.
¿Alguien tiene una solución para este problema?
Edit: Creo que no he sido claro al explicar mis requisitos. Quiero que la lista se clasifique en columnas sin saber cuántos elementos voy a tener, y así siempre tendré dos filas .
Así, por ejemplo, con 7 artículos, quiero tener:
One Two Three Four
Five Six Seven
Y con 3 artículos:
One Two
Three
¿Por qué no darle un max-width ?
ul {
max-width: somevalue; // which would last when the third item ends
}
O bien, puede agregar clase a ellos como
<ul>
<li class="one">One</li>
<li class="one">Two</li>
<li class="one">Three</li>
<li class="two">Four</li>
<li class="two">Five</li>
<li class="two">Six</li>
</ul>
Ahora CSS como:
.one {
display: inline;
}
.two {
display: inline;
}
Lo último del relleno es como
ul li {
padding: somevalue;
}
Y para rebanar:
ul {
max-width: 200px; // to break the list
}
¡La buena suerte para usted sería que primero puede verificar el ancho de la lista! Y luego divídalo en dos partes iguales utilizando JS, y luego aplíquelo.
Si desea obtener el calucador de CSS, use esto:
width: calc(var1 + var2); // calc will do the math..
Aquí está el violín para esta situación: http://jsfiddle.net/afzaal_ahmad_zeeshan/xN87Q/
Aquí hay una manera simple de hacerlo usando jquery. Sé que se menciona que se necesita una forma de CSS, pero esto es solo para referencia futura si alguien quiere referirse a esta pregunta.
Obtenga el número de elementos LI y divídalo por el número de filas y establezca ese valor en propiedad de conteo de columnas.
Jquery
$(document).ready(function() {
var numitems = $("#myList li").length;
$("ul#myList").css("column-count",Math.round(numitems/2));
});
CSS
ul {
width: 900px;
}
li {
width: 75px;
height: 75px;
margin-top: 10px;
margin-right: 10px;
display: inline-block;
}
HTML
<ul id="myList">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
</ul>
EDITAR:
La misma implementación usando javascript simple.
var ul = document.getElementById("myList");
var li = ul.getElementsByTagName("li");
var numItems = li.length;
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "ul { column-count: " + Math.round(numItems/2) + "; }";
document.body.appendChild(css);
Debe establecer el ancho de UL, ya que la cantidad de filas dependerá del ancho incluso después de configurar el recuento de columnas. También puede establecerlo en 100%, pero luego el número de filas cambiará según el tamaño de la ventana. Para restringir el número de filas a 2, puede requerirse un ancho fijo para UL.
Fuente: Creación de una lista desordenada de dos columnas
Fiddle: Demo proporcionada en el enlace.
HMTL
<ul class="two-col-special">
<li>First Category</li>
<li>Second Category</li>
<li>Third Category</li>
<li>Fourth Category</li>
<li>Fifth Category</li>
</ul>
CSS
.two-col-special {
border: 1px dotted blue;
overflow: auto;
margin: 0;
padding: 0;
}
.two-col-special li {
display: inline-block;
width: 45%;
margin: 0;
padding: 0;
vertical-align: top; /* In case multi-word categories form two lines */
}
.two-col-special li:before {
content: ''+'';
padding: 5px;
margin-right: 5px; /* you can tweak the gap */
color: orange;
background-color: white; /* in case you want a color... */
display: inline-block;
}
Podría establecer su li en un 33% de ancho y flotando uno contra el otro, una vez que no haya suficiente espacio en una fila, se empujarán hacia abajo en filas de 3 de igual ancho.
ul li{
width: 33%;
float: left;
}