Wie kann ich aufhören, nach links zu schweben?

97

Ich habe folgenden Code:

<div style="float: left; width: 100%;">
  <label style="float: left;">ABC</label>  
  <input style="float: left; font-size: 0.5em;" type="button"   onclick="addTiny(0,'Question_Text'); return false;" value="&#x25BC;" title="Editor" />   
  <input style="float: left; font-size: 0.5em;" type="button" onclick="remTiny(0,'Question_Text'); return false;" value="&#x25B2;" title="Hide" />   

  <div class="adm">
    <textarea rows="2;" style="width: 100%" class="text-box multi-line mceEditor">
      abc
    </textarea>
  </div>
</div>

Mein Problem ist, dass das div mit der Klasse adm nach links schwebt und so in derselben Zeile wie das Label und zwei Eingabetasten steht. Gibt es eine Möglichkeit, diese Verschiebung vom Schweben weg zu machen?

css html css-float TonyG
quelle
Sie sollten eine Antwort akzeptieren, auch wenn es Ihre eigene ist.
2.

Antworten:

101

Ein Standardansatz besteht darin, ein Clearing-Div zwischen den beiden Elementen auf Floating-Block-Ebene hinzuzufügen:

<div style="clear:both;"></div>
Shad
quelle
3
Aber in einigen Fällen müssen Sie hinzufügendisplay:block
Volodymyr Levytskyi
62

Manchmal funktioniert klar nicht. Verwenden Sie float: noneals Überschreibung

DanKodi
quelle
2
Ja, wenn Sie einen vorhandenen CSS-Eintrag float: left(oder rechts) überschreiben möchten, ist dies die Lösung.
Alexis Wilke
28

Sie können ändern .admund hinzufügen

.adm{
 clear:both;
}

Das sollte es zu einer neuen Zeile bewegen

Brett
quelle
Das sollte .admich denken.
tjm
9

style="clear:both;"zum "adm" hinzufügen div.

tjm
quelle
4

Okay, ich habe gerade festgestellt, dass die Antwort darin besteht, den ersten verbleibenden Schwimmer vom ersten DIV zu entfernen. Ich weiß nicht, warum ich das vorher nicht gesehen habe.

TonyG
quelle
3

Sie sollten auch die Eigenschaft "clear" in CSS überprüfen, falls das Entfernen eines Floats keine Option ist

Trey
quelle
3

Das CSS clear: leftin Ihrer Adm-Klasse sollte verhindern, dass das Div mit den Elementen darüber schwebt.

Chris Kent
quelle
0

Fügen Sie einfach overflow:hiddenden ersten divStil hinzu. Das sollte genug sein.

sonnig
quelle