div mobili negli elementi dell'elenco
Domanda
Ho una lista con due <div>
s in ogni <li>
e voglio farli galleggiare uno accanto all'altro e voglio il <li>
per occupare tutto lo spazio disponibile.Come lo faccio?
<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>
Soluzione
*{ 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; }
Dovrebbe bastare.
Altri suggerimenti
Per i div, devi solo fluttuare a sinistra e il li, vuoi fare un clear.COSÌ:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Vedo che questo è un vecchio post, ma se qualcuno incontra lo stesso problema pensa a questo:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Puoi usare arco invece di div
Prendere un div oltre all'altro o in orizzontale devi applicare la forza bruta con .css ma se usi arco lo farà naturalmente.Copia e incolla il seguente codice in a html e guarda di cosa sto parlando:
<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>
Inoltre, almeno per Microsoft <li><div></div></li>
non convaliderà.
Senza verificare per essere sicuro, questo dovrebbe funzionare
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Presumo che per prendere l'intero spazio intendi una larghezza del 100%.Presumo anche che tu non voglia applicare uno stile all'elenco, motivo per cui l'ho rimosso in questo esempio.Anche questo è privo di hack.Non è necessario cancellare nulla, purché l'elemento dell'elenco abbia una larghezza e un overflow:coppia proprietà/valore nascosta.
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;}
Ciò dovrebbe fare come richiesto dalla mia conoscenza dei CSS