Zur Navigation

Float&Clear Frage

1 Isildur

Und zwar geht es um etwas eigentlich völlig simples.
Ich habe einen Text in p und ein input Element, möchte jeweils input jeweils rechts neben p packen und danach das ganze in ne neue Zeile.
Wie ich aus Neomicsthread schon entnommen habe ist das mit der Darstellung nebeneinander ja recht einfach, einfach alle float left, nur steht dann alles nebeneinander.
Sähe dann so aus
<div>
<form>
<p style="float:left;">Text</p><input.. style="float:left;">
<p style="float:left;">Text</p><input.. style="float:left;">
<p style="float:left;">Text</p><input.. style="float:left;">
...
</form>
</div>
Nun soll das Ganze aber z.B. nen GB-Formular werden und ich will jeweils nur ein p&input pro Zeile haben. Dazu hatte ich ausprobiert bei den Ps noch clear:left dazu zu setzen. Das funktioniert auch auf einer Testseite gut nur im Zusammenspiel mit dem anderen Layout nichtmehr. Da orientiert sich clear dann nämlich an Div Containern außerhalb des eigenen und steht dann darunter.
Also ich habe links eine navi, rechts auchnochwas und das steht dann darunter. Wie kann ich das verhindern, gibt es ne Möglichkeit das clear sozusagen auf den eigenen div zu beschränken?

05.09.2006 17:53

2 Jörg

Das funktioniert auch auf einer Testseite gut nur im Zusammenspiel mit dem anderen Layout nichtmehr. Da orientiert sich clear dann nämlich an Div Containern außerhalb des eigenen und steht dann darunter.

Ja, das Problem kann entstehen, wenn floats über mehrere Ebenen verwendet werden - eine Lösung unter Verwendung von float kenne ich leider auch nicht

Du könntest das p und das input Element alternativ auch mit display:inline nebeneinander anordnen:

<p style="display:inline;">Text</p><input type="text">

Nur ließe sich die Breite von p dann nicht mehr einheitlich festlegen

Rudy hatte hier aber auch mal eine Anleitung verlinkt, mit Hilfe derer Felder und Texte eines Formulars ohne float nebeneinander ausgerichtet werden können

05.09.2006 18:39 | geändert: 05.09.2006 18:40

3 Rudy

Leider hat die Lösung einen kleinen Schönheitsfehler, etwas JS ist notwendig, um bei mozilla das fehlede inline-block auszubügeln. Das lässt sich aber angesichts des sonst schönen Alistapart-Codes verkraften.

05.09.2006 20:53

4 Isildur

Danke. Das Label Element hatte ich irgendwie nicht mehr auf der Rechnung, nie damit gearbeitet. Ich habe die Variante von dem Link nur als Vorlage genommen, für meine Zwecke taugt
<label for="name" style="display:block; float:left;">Name</label><input ..>
Das bringt zwar wieder ein float rein funktioniert aber mit einem einfachen float(ich muss input dann nicht floaten).

05.09.2006 21:09

Beitrag schreiben (als Gast)

Beim Verfassen des Beitrages bitte die Forenregeln beachten.





[BBCode-Hilfe]