CSS label und input auf eine Linie bringen

[selberbauer]

Hi,

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

<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ß

 

[taxishop]

<table width="600" border="0">
<tr>
<td valign="bottom">Name:</td>
<td valign="bottom"><input type="text" /></td>
<td valign="bottom">Name:</td>
<td valign="bottom"><input type="text" /></td>
<td valign="bottom">Name:</td>
<td valign="bottom"><input type="text" /></td>
</tr>
</table>

oder
http://www.css4you.de/Texteigenschaften/vertical-align.html
http://www.css4you.de/example/vertical-align.html

 

[snsdrv]

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]

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]

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]

Da sowohl input als auch label Inline-Elemente sind sollte "vertical-align" funktionieren.

 

[selberbauer]

Danke, mein css sieht momentan so aus:

#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?

 

[Daaron]

Gib dem Label n Padding.

 

[selberbauer]

Das klappt zwar, allerdings sind die felder dann nicht in einer linie.

Name: |_____________|
Betreff: |______________|

 

[Daaron]

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.

 

[snsdrv]

@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]

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]

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.

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: ;
}

<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]

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

 

[snsdrv]

@Daaron: sorry

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

@benneque: richtig, das meinte ich auch

 

[morcego]

Welchen Uralt-Browser der mich sowieso nicht interessiert tret ich damit auf den Schlips?
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.

 

[xii]

<!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>

 

[morcego]

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
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]

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]

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
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 )