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?


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>

3
Aber in einigen Fällen müssen Sie hinzufügendisplay:block
Volodymyr Levytskyi

62

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


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


Das sollte .admich denken.
tjm

9

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


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.


3

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


3

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


0

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

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.