divs em itens da lista flutuante
Pergunta
Eu tenho uma lista com dois <div>
s em cada <li>
e eu quero flutuar-los um ao lado do outro e eu quero o <li>
tomar todo o espaço availabe. Como posso fazê-lo?
<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>
Solução
*{ 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; }
Deve fazer o truque.
Outras dicas
Para os divs, você só precisa flutuar à esquerda e o li, você quer fazer uma clara. Assim:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Eu vejo este é um post antigo, mas se alguém corre para o mesmo problema pensar sobre isso:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Você pode usar espaço em vez de div
Para obter um div ao lado da outra ou horizontalmente você tem que aplicar a força bruta com. css , mas se você usar espaço ele irá, naturalmente . Copie e cole o seguinte código em um html e ver o que eu estou falando:
<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>
Além disso, pelo menos para Microsoft <li><div></div></li>
não vai validar.
Sem verificar para ter certeza, isso deve funcionar
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Eu assumo por take todo o espaço que você quer dizer uma largura de 100%. Também gostaria de assumir que você não quer estilo aplicado à lista, que é por isso que eu ter removido neste exemplo. Isso também é livre de piratas. Você não precisa clara qualquer coisa, desde que o seu item da lista tem uma largura eo overflow:. Estabelecimento escondidos par / valor
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;}
Isso deve fazer como exigido de meu conhecimento de CSS