divs flottants dans les éléments de la liste
Question
J'ai une liste avec deux <div>
dans chaque <li>
et je veux les placer côte à côte et je veux que le <=> occupe tout l'espace disponible. Comment je le fais?
<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>
La solution
*{ 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; }
Devrait faire l'affaire.
Autres conseils
Pour les divs, il vous suffit de flotter à gauche et le li, vous voulez faire un dégagement. Donc:
li
{
clear: left;
}
.a
{
float: left;
}
.b
{
float: left;
}
Je vois qu'il s'agit d'un ancien message, mais si quelqu'un se heurte au même problème, réfléchissez-y:
<div>A block-level section in a document</div>
<span>An inline section in a document</span>
Vous pouvez utiliser span au lieu de div
.Pour obtenir une div à côté de l'autre ou horizontalement, vous devez appliquer la force brutale avec. css , mais si vous utilisez span , cela se fera naturellement. . Copiez et collez le code suivant dans un html pour voir de quoi je parle:
<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>
En outre, au moins pour Microsoft <li><div></div></li>
ne validera pas.
Sans vérifier pour vous en assurer, cela devrait fonctionner
LI { width: 100%; }
.a { float: left; }
.b { float: right; }
Je suppose que, par tout l’espace, vous entendez une largeur de 100%. Je suppose également que vous ne souhaitez pas appliquer de style à la liste, c'est pourquoi je l'ai supprimée dans cet exemple. Ceci est également sans piratage. Vous n'avez rien à effacer, tant que votre élément de liste a une largeur et un débordement: paire propriété / valeur masquée.
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;}
Cela devrait correspondre à vos connaissances en CSS