Artículos de la lista uno al lado del otro como iconos dentro de un div (css)

Question

Estoy buscando una manera de crear un <ul> de elementos que puedo poner dentro de un <div> y hacer que aparezcan uno al lado del otro y envolverlos la siguiente línea a medida que se cambia el tamaño de la ventana del navegador.

Por ejemplo, si tenemos 10 elementos en la lista que muestran actualmente 5 elementos en la primera fila y 5 artículos en la segunda fila, a medida que el usuario amplía la ventana del navegador, se convierte en 6 elementos en la primera fila y 4 artículos en la segunda fila, etc.

Estoy buscando una funcionalidad similar a la de Windows Explorer cuando está en la vista de mosaicos/iconos/miniaturas. Puedo crear el <li> que quiero en cuanto al tamaño, color, contenido, etc. Solo estoy teniendo problemas con el embalaje/limpieza/etc. parte.

Answer 1

dar el flotador LI: a la izquierda (o derecha)

Todos ellos estarán en la misma línea hasta que no haya más espacio en el contenedor (su caso, un ul). (se olvidó): si tiene un elemento de bloque después de los elementos flotantes, también se apegará a ellos, a menos que le dé una explicación clara: ambos, O coloque un div vacío delante de él con claridad: ambos

Answer 2

Aquí hay una buena recurso para envolver listas de columnas. http://www.communitymx.com/content/article.cfm?cid=27f87

Answer 3

Esto puede ser una solución pura de CSS. Teniendo en cuenta:

<ul class="tileMe"> 
    <li>item 1<li> 
    <li>item 2<li> 
    <li>item 3<li> 
</ul> 

El CSS sería:

.tileMe li { 
    display: inline; 
    float: left; 
} 

Ahora, desde que ha cambiado el modo de visualización de 'bloque' (implícita) a 'inline', cualquier relleno, margen, ancho, o los estilos de altura que aplicó a los elementos li no funcionarán. Es necesario para anidar un elemento en bloque dentro de la li:

<li><a class="tile" href="home">item 1</a></li> 

y añadir el siguiente CSS:

.tile a { 
    display: block; 
    padding: 10px; 
    border: 1px solid red; 
    margin-right: 5px; 
} 

El concepto clave detrás de esta solución es que va a cambiar el estilo de visualización de la li para 'en línea' y anidar un elemento de nivel de bloque dentro para lograr el efecto de mosaico consistente.

Answer 4

Utilice el siguiente código para flotar los elementos y asegúrese de que se muestran en línea.

li ul.myclass {float: left; display: inline}

También asegúrese de que el contenedor se los pone en está flotando con un ancho de 100% o alguna otra técnica para asegurar los objetos flotaban están contenidos dentro de ella y siguientes artículos debajo de él.

Answer 5

Yo recomendaría que utilice display: inline;. float está jodido en IE.Aquí está un ejemplo de cómo iba a acercarse a ella:

<ul class="side-by-side"> 
    <li>item 1<li> 
    <li>item 2<li> 
    <li>item 3<li> 
</ul> 

y aquí está la CSS:

.side-by-side { 
    width: 100%; 
    border: 1px solid black; 

} 
.side-by-side li { 
    display: inline; 
} 

Además, si usted usar flotadores la ul no va a envolver alrededor de los li 's y en su lugar tienen una altura de 0 en este ejemplo:

.side-by-side li { 
    float: left; 
} 

Answer 6

He utilizado una combinación de las anteriores para lograr un resultado de trabajo; Cambiar flotador a la izquierda y visualización de la secuencia del li sí HTML:

<ol class="foo"> 
    <li>bar1</li> 
    <li>bar2</li> 
</ol> 

CSS:

.foo li { 
    display: block; 
    float: left; 
    width: 100px; 
    height: 100px; 
    border: 1px solid black; 
    margin: 2px; 
} 

Answer 7

añadir esta línea en su archivo css:

.classname ul li { 
    float: left; 
}