Floating divs in Listenelemente

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

  •  01-07-2019
  •  | 
  •  

Frage

Ich habe eine Liste mit zwei <div>s in jedem <li> und ich möchte, dass sie eins neben dem anderen schweben, und ich möchte, dass die <li> die ganze verfügbaren Platz zu nehmen. Wie mache ich das? 

<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>
War es hilfreich?

Lösung 

 *{ 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; }

Sollte es tun.

Andere Tipps

Für die divs, brauchen Sie nur links zu schweben und die li, wollen Sie eine klare tun. Also: 

li
{
    clear: left;
}
.a
{
    float: left;
}
.b
{
    float: left;
}

Das sehe ich eine alte Post, aber wenn jemand in die gleiche Ausgabe läuft darüber nachdenken: 

<div>A block-level section in a document</div>
<span>An inline section in a document</span>

Sie können Spanne anstelle von div

a Um div neben dem anderen oder horizontal müssen Sie mit brutalen Gewalt anwenden. CSS , aber wenn Sie mit Spanne wird es natürlich . Kopieren Sie den folgenden Code in einem html und sehen, was ich rede: 

<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>

Auch, zumindest für Microsoft <li><div></div></li> nicht validiert werden.

Ohne sicherstellen Überprüfung, sollte diese Arbeit 


LI { width: 100%; }
.a { float: left; }
.b { float: right; }

Ich gehe davon aus, indem nehme den ganzen Raum Sie eine Breite von 100% bedeuten. Ich würde auch davon ausgehen, dass Sie auf die Liste angewandt nicht Styling wollen, weshalb ich es in diesem Beispiel entfernt haben. Dies ist auch Hack frei. Sie müssen nicht klar etwas, solange Ihr Listenelement eine Breite hat, und den Überlauf. Versteckte Eigenschaft / Wert-Paar 

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;}

Das sollte als von meinem Wissen über CSS erforderlich machen

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top