seleccionar - Los elementos de la lista de lado a lado como iconos dentro de un div(css)

selectores avanzados css

Question

Estoy buscando una manera de crear un <ul> de elementos que pueda colocar dentro de un <div> y hacer que aparezcan lado a lado y se ajusten a 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 actualmente muestran 5 elementos en la primera fila y 5 elementos 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 elementos en la primera fila. la segunda fila, etc.

Estoy buscando una funcionalidad similar a la que hace el Explorador de Windows en la vista de mosaicos / iconos / miniaturas. Soy capaz de crear los <li> que quiero en cuanto al tamaño, color, contenido, etc. Solo estoy teniendo problemas con la envoltura / limpieza / etc. parte.

Answer 1

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

Answer 2

Esto puede ser una solución CSS pura. Dado:

<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, como ha cambiado el modo de visualización de "bloque" (implícito) a "en línea", no funcionará ningún estilo de relleno, margen, ancho o altura que haya aplicado a los elementos li. Necesitas anidar un elemento de nivel de bloque dentro de la li:

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

y añade 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 está cambiando el estilo de visualización de li a ''en línea'' y está anidando un elemento de nivel de bloque en el interior para lograr un efecto de mosaico consistente.

Answer 3

Te recomendaría que uses display: inline; . float está jodido en IE. Aquí hay un ejemplo de cómo lo abordaría:

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

y aquí está el css:

.side-by-side {
width: 100%;
border: 1px solid black;
}
.side-by-side li {
display: inline;
}

Además, si usas flotadores, la ul no se envolverá alrededor de los li y en su lugar tendrá una altura de 0 en este ejemplo:

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

Answer 4

Use el siguiente código para hacer flotar los elementos y asegurarse de que se muestren en línea.

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

También asegúrese de que el contenedor en el que los coloque esté flotado con una anchura del 100% o alguna otra técnica para garantizar que los elementos flotantes estén dentro y los siguientes elementos debajo.

Answer 5

Utilicé una combinación de lo anterior para lograr un resultado de trabajo; Cambie float a Izquierda y muestre Bloquee el propio li 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 6

añade esta línea en tu archivo css:

.classname ul li {
float: left;
}

Answer 7

dar el flotador LI: izquierda (o derecha)

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