divs flottants dans les éléments de la liste

StackOverflow https://stackoverflow.com/questions/93625

  •  01-07-2019
  •  | 
  •  

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>
Était-ce utile?

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

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top