divs flotantes en elementos de la lista
Pregunta
tengo una lista con dos <div>
s en cada <li>
y quiero hacerlos flotar uno al lado del otro y quiero el <li>
para ocupar todo el espacio disponible.¿Cómo lo hago?
<html>
<head>
<title></title>
<style type="text/css">
body {
}
ul {
}
li {
}
.a {
}
.b {
}
</style>
</head>
<body>
<ul>
<li>
<div class="a">
content
</div>
<div class="b">
content
</div>
</li>
</ul>
</body>
</html>
Solución
*{ margin: 0; padding: 0;}
li{ width: 100%: display: block; }
li:after{ clear: both; }
div.a{ width: 49%; float: left; }
div.b{ width: 49%; float: left; }
Debería funcionar.
Otros consejos
Para los divs, solo necesitas flotar hacia la izquierda y li, deseas borrarlos.Entonces:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Veo que esta es una publicación antigua, pero si alguien se encuentra con el mismo problema, piense en esto:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Puedes usar durar en lugar de div
Conseguir un div al lado del otro u horizontalmente tienes que aplicar fuerza bruta con .CSS pero si usas durar lo será naturalmente.Copie y pegue el siguiente código en un HTML y mira de lo que estoy hablando:
<ul>
<li>
<div style="background-color:red">red</div>
<div style="background-color:blue">blue</div>
</li>
<li>
<span style="background-color:red">red</span>
<span style="background-color:blue">blue</span>
</li>
</ul>
Además, al menos para Microsoft <li><div></div></li>
no validará.
Sin verificar para estar seguro, esto debería funcionar.
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Supongo que al tomar todo el espacio te refieres a un ancho del 100%.También asumiría que no desea que se aplique estilo a la lista, razón por la cual lo eliminé en este ejemplo.Esto también está libre de hacks.No necesita borrar nada, siempre y cuando el elemento de su lista tenga un ancho y un desbordamiento:par propiedad/valor oculto.
ul,
li {
width: 100%;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
overflow: hidden;
}
li div.a,
li div.b {
float: left;
}
li { width: 100%;}
.a { float: left;}
.b { float: left;}
li{width:100%;}
.a{}
.b{float: left;}
Eso debería funcionar según lo requerido por mi conocimiento de CSS.