Förslag på struktur för flera form-fält i sidled?

4 svar · 300 visningar · startad av bassebhu 21 aug. 2006

bassebhuMedlem sedan nov. 20016 480 inlägg

Frågan21 aug. 2006 21:19#1

Hej!

Jag försöker komma på något smart sätt att strukturera upp formulärsfält, men det känns onödigt krångligt med den float-metod som jag har gett mig på.

Jag vill ha rubrik över varje fält och flera fält i sidled och under varann.

Ett snabbt och överskådligt exempel:

<div>

<div style="float: left;">
<div>Rubrik</div>
<div><input></div>
</div>

<div style="float: left;">
<div>Rubrik</div>
<div><input></div>
</div>

<div style="float: left;">
<div>Rubrik</div>
<div><input></div>
</div>

</div>

Vad gör jag när sista floaten har varit? Återställer med ett <hr /> med clear eller dylikt?
Hur åstakommer man samma sak på ett bättre sätt? :)

Tack!

Dies_IraeMedlem sedan aug. 2001145 inlägg

21 aug. 2006 21:41#2

Kan inte komma på nått bättre sätt. Fast de räcker ju med en <br> efter rubrikerna och sen som du sa en clear: left efter sista floaten. Ska bli intressant att se om de dyker upp något smart sätt :)

AddeladdeMedlem sedan jan. 20013 406 inlägg

21 aug. 2006 21:43#3

Varför inte använda tabeller. Det är väl typ en tabell du ska fylla i?

bassebhuMedlem sedan nov. 20016 480 inlägg

21 aug. 2006 21:51#4

Dies_Irae skrev:

Kan inte komma på nått bättre sätt. Fast de räcker ju med en <br> efter rubrikerna och sen som du sa en clear: left efter sista floaten. Ska bli intressant att se om de dyker upp något smart sätt :)

Sant med br, men då får jag lägga lite margin-top på fälten i stället för på divarna för att det ska bli lite luft från texten då?

zcorpanMedlem sedan dec. 20042 245 inlägg

21 aug. 2006 22:04#5

<form>
 <p><label>Rubrik <input></label></p>
 <p><label>Rubrik <input></label></p>
 <p><label>Rubrik <input></label></p>
</form>

form { zoom:1; /* haslayout ie */ }
form::after { content:""; display:block; clear:left; } /* bana flöten */
form p { float:left; }
input { display:block; }

Nåt i den stilen?