html - texto - ¿Cómo mostrar una lista desordenada en dos columnas?
lista html 2 columnas (13)
Navegadores modernos
aproveche el módulo de columnas css3 para respaldar lo que está buscando.
http://www.w3schools.com/cssref/css3_pr_columns.asp
CSS:
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
Navegadores heredados
Desafortunadamente para el soporte de IE necesitarás una solución de código que involucra JavaScript y dom manipulación. Esto significa que cada vez que el contenido de la lista cambie, deberá realizar la operación para reordenar la lista en columnas y volver a imprimir. La solución a continuación usa jQuery para abreviar.
HTML:
<div>
<ul class="columns" data-columns="2">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
JavaScript:
(function($){
var initialContainer = $(''.columns''),
columnItems = $(''.columns li''),
columns = null,
column = 1; // account for initial column
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
column += 1;
}
$(columns.get(column)).append(el);
});
}
function setupColumns(){
columnItems.detach();
while (column++ < initialContainer.data(''columns'')){
initialContainer.clone().insertBefore(initialContainer);
column++;
}
columns = $(''.columns'');
}
$(function(){
setupColumns();
updateColumns();
});
})(jQuery);
CSS:
.columns{
float: left;
position: relative;
margin-right: 20px;
}
EDITAR:
Como se señala a continuación, ordenará las columnas de la siguiente manera:
A E
B F
C G
D
mientras que OP solicitó una variante que coincida con lo siguiente:
A B
C D
E F
G
Para lograr la variante simplemente cambie el código a lo siguiente:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column > columns.length){
column = 0;
}
$(columns.get(column)).append(el);
column += 1;
});
}
Con el siguiente HTML, ¿cuál es el método más fácil para mostrar la lista como dos columnas?
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Pantalla deseada:
A B
C D
E
La solución debe poder funcionar en Internet Explorer.
¡más una respuesta después de algunos años!
en este artículo: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/
HTML:
<ul id="double"> <!-- Alter ID accordingly -->
<li>CSS</li>
<li>XHTML</li>
<li>Semantics</li>
<li>Accessibility</li>
<li>Usability</li>
<li>Web Standards</li>
<li>PHP</li>
<li>Typography</li>
<li>Grids</li>
<li>CSS3</li>
<li>HTML5</li>
<li>UI</li>
</ul>
CSS:
ul{
width:760px;
margin-bottom:20px;
overflow:hidden;
border-top:1px solid #ccc;
}
li{
line-height:1.5em;
border-bottom:1px solid #ccc;
float:left;
display:inline;
}
#double li { width:50%;}
#triple li { width:33.333%; }
#quad li { width:25%; }
#six li { width:16.666%; }
Aquí hay una posible solución:
Retazo:
ul {
width: 760px;
margin-bottom: 20px;
overflow: hidden;
border-top: 1px solid #ccc;
}
li {
line-height: 1.5em;
border-bottom: 1px solid #ccc;
float: left;
display: inline;
}
#double li {
width: 50%;
}
<ul id="double">
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
</ul>
Y está hecho.
Para 3 columnas use un ancho de li como 33%, para 4 columnas use 25% y así sucesivamente.
Con Bootstrap ... Esta respuesta ( https://.com/a/23005046/1128742 ) me hizo apuntar hacia esta solución:
<ul class="list-unstyled row">
<li class="col-xs-6">Item 1</li>
<li class="col-xs-6">Item 2</li>
<li class="col-xs-6">Item 3</li>
</ul>
En updateColumns() necesita if (column >= columns.length) lugar de if (column > columns.length) para listar todos los elementos (por ejemplo, C se omite) así que:
function updateColumns(){
column = 0;
columnItems.each(function(idx, el){
if (column >= columns.length){
column = 0;
}
console.log(column, el, idx);
$(columns.get(column)).append(el);
column += 1;
});
}
Esta es la forma más simple de hacerlo. CSS solo
- agregue ancho al elemento ul.
- agregar visualización: bloque en línea y ancho de la nueva columna (debe ser inferior a la mitad del ancho de ul).
ul.list {
width: 300px;
}
ul.list li{
display:inline-block;
width: 100px;
}
<ul class="list">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
Esta fue una solución perfecta para mí, buscándola durante años:
http://css-tricks.com/forums/topic/two-column-unordered-list/
Estaba viendo la solución de @jaider que funcionó pero ofrezco un enfoque ligeramente diferente que creo que es más fácil de trabajar y que he visto que es bueno en todos los navegadores.
ul{
list-style-type: disc;
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
list-style-position: inside;//this is important addition
}
Por defecto, la lista no ordenada muestra la posición de viñeta afuera, pero luego en algunos navegadores causaría algunos problemas de visualización en función de la forma en que el navegador diseña su sitio web.
Para que se muestre en el formato:
A B
C D
E
etc. usa lo siguiente:
ul li{
float: left;
width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
list-style-type: disc;
}
Esto debería resolver todos sus problemas con la visualización de columnas. Todo lo mejor y gracias @jaider ya que su respuesta me ayudó a guiarme para descubrir esto.
Esto se puede lograr utilizando la propiedad css de recuento de columnas en div principal,
me gusta
column-count:2;
mira esto para más detalles.
Cómo hacer que la lista DIV flotante aparezca en columnas, no en filas
La solución heredada en la respuesta principal no me funcionaba porque quería afectar a múltiples listas en la página y la respuesta supone una sola lista además de que usa un poco de estado global. En este caso, quería modificar todas las listas dentro de una <section class="list-content"> :
const columns = 2;
$("section.list-content").each(function (index, element) {
let section = $(element);
let items = section.find("ul li").detach();
section.find("ul").detach();
for (let i = 0; i < columns; i++) {
section.append("<ul></ul>");
}
let lists = section.find("ul");
for (let i = 0; i < items.length; i++) {
lists.get(i % columns).append(items[i]);
}
});
Me gusta la solución para los navegadores modernos, pero faltan las viñetas, así que le agrego un pequeño truco:
http://jsfiddle.net/HP85j/419/
ul {
list-style-type: none;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
}
li:before {
content: "• ";
}
Puedes hacer esto muy fácilmente con el plugin jQuery-Columns, por ejemplo, para dividir un ul con una clase de .ylist que harías
$(''.mylist'').cols(2);
Aquí hay un ejemplo en vivo en jsfiddle
Me gusta más que con CSS porque con la solución CSS no todo se alinea verticalmente en la parte superior.
Traté de publicar esto como un comentario, pero no pude conseguir que las columnas se muestren correctamente (según su pregunta).
Usted está pidiendo:
AB
discos compactos
mi
... pero la respuesta fue aceptada ya que la solución volverá:
ANUNCIO
SER
do
... entonces o la respuesta es incorrecta o la pregunta es.
Una solución muy simple sería establecer el ancho de su <ul> y luego flotar y establecer el ancho de sus elementos <li> como tal
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
ul{
width:210px;
}
li{
background:green;
float:left;
height:100px;
margin:0 10px 10px 0;
width:100px;
}
li:nth-child(even){
margin-right:0;
}
Ejemplo aquí http://jsfiddle.net/Jayx/Qbz9S/1/
Si su pregunta es incorrecta, entonces se aplican las respuestas anteriores (con una solución JS para la falta de soporte de IE).