CSS label und input auf eine Linie bringen

selberbauer

Captain
Dabei seit
Juni 2009
Beiträge
3.604
Hi,

ich habe ein Formular und möchte <label> und <input> auf eine Höhe bringen. Momentan ist alles verschoben...

Code:
<form>
<label>Name:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
<label>Betreff:</label>
<input type="text" />
</form>
Mit welchem css Befehl kann ich mehrere Objekte auf gleicher Höhe ausrichten?

Gruß
 

Arseen

Cadet 4th Year
Dabei seit
März 2005
Beiträge
75
Mach es nicht mit Tabellen. Die Zeiten sind vorbei (sollte man denken) ...

/* hiermit lässt du die elemente nebeneinander setzen */
form input, form label {
float:left;
}

den float musst du aber auch wieder aufheben, also ...

<form>
<label>Name:</label>
<input type="text" />
<span class="fixfloat">&nbsp;</span>
<label>Email:</label>
<input type="text" />
<span class="fixfloat">&nbsp;</span>
<label>Betreff:</label>
<input type="text" />
<span class="fixfloat">&nbsp;</span>
</form>

.fixfloat {
border:none;
clear:both;
display:block;
float:none;
font-size:0;
height:0;
line-height:0
}

gib dem label ein display:block und eine Breite

form label {
display: block;
width: 200px; /* zum Beispiel */
}

Arseen
 

ChiliSchaf

Lieutenant
Dabei seit
Jan. 2007
Beiträge
902
Lieber so, damit ersparst du dir die (selektierbaren) geschützten Leerzeichen im Dokument.


<form>
<label for="name">Name</label><input type="text" name="name" /><br />
<label for="email">E-Mail</label><input type="text" name="email" /><br />
<label for="betreff">Betreff:</label><input type="text" name="betreff" /><br />
</form>


form{
// width: xxxpx;
}
label, input, select, textarea {
display: block;
float: left;
}
label {
// width: xxxpx;
// text-align: right;
}
input, select, textarea {
// width: xxxpx;
}
form br {
clear: left;
}

wenn du den label eine gewisse Breite zuweist (und zur Schönheit evtl noch deren Inhalt rechts ausrichtest) hast du auch schön alle Eingabefelder direkt übereinander.
 

selberbauer

Captain
Ersteller dieses Themas
Dabei seit
Juni 2009
Beiträge
3.604
Hi,

ich bin auch der ansicht, dass man Tabellen nicht "missbrauchen" sollte, allerdings gefällt mir deine <span> methode nicht so ganz. Gibt es noch eine Möglichkeit es nur mit <label> und <input> zu machen?
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Da sowohl input als auch label Inline-Elemente sind sollte "vertical-align" funktionieren.
 

selberbauer

Captain
Ersteller dieses Themas
Dabei seit
Juni 2009
Beiträge
3.604
Danke, mein css sieht momentan so aus:
Code:
#contact form {
    margin: 30px 0 0; text-align: left;
}

#contact label {
    vertical-align: middle;
}

#contact input {
    width: 260px;
}

#contact textarea {
    width: 550px; height: 200px; margin: 14px 0 16px;
}
Das einzige was stört ist, dass die input felder direkt neben dem label stehen. Ich kann diese auch nicht mit margin verrücken...
Jemand ne idee?
 

selberbauer

Captain
Ersteller dieses Themas
Dabei seit
Juni 2009
Beiträge
3.604
Das klappt zwar, allerdings sind die felder dann nicht in einer linie.

Name: |_____________|
Betreff: |______________|
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
gibt den Labels display:inline-block statt display:inline, und gib ihnen einfach eine Breite. Geht zwar nicht in alten Krüppelbrowsern, aber wer die Dinger in ihrer Existenz auch noch zu bestärken ist eh eine Straftat.
 

Arseen

Cadet 4th Year
Dabei seit
März 2005
Beiträge
75
@Daaron:

das mit den <br> Tags ist so eine Sache. Ich habe auf den Android-Browser das Problem, dass der mir wirklich, obwohl ich nur den Float aufheben möchte, mir einen Abstand mit Zeilenumbruch macht. Deswegen die leeren span-Tags. Bisher das Beste was ich layout-technisch gefunden habe.
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Von mir gabs kein <br>...
Floats mit <br> zu beenden ist eh falsch. Die korrekte Variante (mit Float) wäre:
label
{
float:left;
clear: left;
}
input
{
float:left;
}
 

morcego

Lt. Commander
Dabei seit
Aug. 2008
Beiträge
1.669
Da brauchts gar kein float.
IDs brauchts eigentlich auch nur für JS, ansonsten eher Klassen.
Extra DIV drum ist auch albern, form ist schon ein html Element.

Code:
form {
	width: ;
	margin:0;
	padding:0;
}

fieldset {
	background-color:transparent;
	border:1px solid FARBE;
	padding: ;
	margin: ;
}

fieldset.double label, fieldset.double input, fieldset.double textarea, fieldset.double .doubleblock { display:inline-block; width:48%; }

input, textarea, label, button {
	color:inherit;
	border:none;
	line-height:16px;
}

input, textarea {
	background-color: ;
	border:1px solid FARBE;
	padding: ;
	margin: ;
}
Code:
<form>
<fieldset class="double">
<label>Name:</label>
<input type="text" />
<label>Email:</label>
<input type="text" />
<label>Betreff:</label>
<input type="text" />
</fieldset>
</form>
Und eigentlich ja noch eine legend dazu. ;)
Willste das Formular als ganzes ändern überlegste dir ne Klasse für das form was bestimmte Sachen anpasst. Clever gemacht ist es hoch variabel.
 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.200
Ich möchte gern das oben genannte Argument mit den Tabellen klarstellen:

Tabellen dürfen natürlich immer noch benutzt werden! Und zwar genau dann, wenn Daten tabellarisch darstellen will ;) Natürlich aber nicht für das Seitenlayout etc.
Nur als Beispiel: Tabellen mit dynamischer Spaltenbreite sind ohne <table> nicht realisierbar, außer man baut sich ein JS zusammen, dass bei Vergrößerung einer Spalte alle anderen mit vergrößert, aber dafür ist es auch nicht wirklich gedacht :p
 

Arseen

Cadet 4th Year
Dabei seit
März 2005
Beiträge
75
@Daaron: sorry :)

@morcego: nicht ganz richtig. deine methode ist nicht komplett browserkompatibel, ansonsten ja

@benneque: richtig, das meinte ich auch
 

morcego

Lt. Commander
Dabei seit
Aug. 2008
Beiträge
1.669
Welchen Uralt-Browser der mich sowieso nicht interessiert tret ich damit auf den Schlips? :D
PS: Außer das inherit, da weiß ich selber das der IE7 das nicht kann. Ist mir aber wie gesagt ziemlich egal. Ständig für alte Browser denken hilft keinem weiter.
 
Zuletzt bearbeitet:

xii

Lt. Junior Grade
Dabei seit
Feb. 2008
Beiträge
265
HTML:
<!DOCTYPE HTML>
<html lang="de-DE">
<head>
  <meta charset="UTF-8">
  <title>divtable</title>
  
  <style type="text/css">
    .dt {display:table}
    .dtr {display:table-row}
    .dtc {display:table-cell}
  </style>
</head>

<body>
    <div class="dt">
    <div class="dtr">
      <div class="dtc"><label for="input_1">Label 1</label></div>
      <div class="dtc"><input type="text" id="input_1" /></div>
    </div>

    <div class="dtr">
      <div class="dtc"><label for="input_2">Label ... 2</label></div>
      <div class="dtc"><input type="text" id="input_2" /></div>
    </div>

    <div class="dtr">
      <div class="dtc"><label for="input_3">Label 3</label></div>
      <div class="dtc"><input type="text" id="input_3" /></div>
    </div>

    <div class="dtr">
      <div class="dtc"><label for="input_4">Label 4</label></div>
      <div class="dtc"><input type="text" id="input_4" /></div>
    </div>
  </div>
</body>

</html>
 

Anhänge

morcego

Lt. Commander
Dabei seit
Aug. 2008
Beiträge
1.669
1. Kannste mit der div-Suppe auch gleich eine Tabelle machen.
Spaßeshalber kann man das auch als dl dt dd aufbauen, dann haste phpbb3 :evillol:
2. Fehlt das Form und theoretisch das Fieldset.
3. Kannste das display dann auf eine form.class anwenden und brauchst kein äußeres div
3.1 die restlichen displays auf die inneren html Elemente.
Benötigt dann pro Zeile <div><label><input></div> und nicht 3 div.
 

Daaron

Fleet Admiral
Dabei seit
Dez. 2011
Beiträge
13.487
Oh Gott, was für ne Code-Suppe....
Dann doch lieber Lösungen mit "display: inline-block" oder mit "float:left; clear:both;" Das mag zwar im Affen-Explorer etwas buggen, aber wer damit Mitleid hat, hat sowieso den letzten Schuss noch nicht gehört.
 

xii

Lt. Junior Grade
Dabei seit
Feb. 2008
Beiträge
265
1. Kannste mit der div-Suppe auch gleich eine Tabelle machen.
Spaßeshalber kann man das auch als dl dt dd aufbauen, dann haste phpbb3 :evillol:
2. Fehlt das Form und theoretisch das Fieldset.
3. Kannste das display dann auf eine form.class anwenden und brauchst kein äußeres div
3.1 die restlichen displays auf die inneren html Elemente.
Benötigt dann pro Zeile <div><label><input></div> und nicht 3 div.
Zu 1.) Div-Suppe? Tabelle? Spaßeshalber?
Zu 2.) Tut mir leid, dass deine Imagination scheinbar nicht dazu ausreicht, Dir jegliches Markup, welches nichts mit der eigentlichen Thematik zu tun hat, vorstellen zu können.
3.) Siehe Punkt 2.
Zu 3.1) Hier hast du noch einiges nachzuholen.


Oh Gott, was für ne Code-Suppe....
Dann doch lieber Lösungen mit "display: inline-block" oder mit "float:left; clear:both;" Das mag zwar im Affen-Explorer etwas buggen, aber wer damit Mitleid hat, hat sowieso den letzten Schuss noch nicht gehört.
Und immer schön die breiten Fix setzen um die eigene Markup so inflexibel wie nur möglich zu gestalten.


Durch die Bank tolle Argumente hier zwei da :o)
 
Zuletzt bearbeitet:
Top