Formular gleich groß machen / selbe Höhe

[rodaN]

HeyHo liebe Community

Ich habe ein Formular erstellt und möchte das die Labels und Buttons usw. alle gleich groß sind bzw. die selbe Höhe haben.

Momentan sieht es so aus: Bild

Wie man sieht, ist das zweite Feld "Quantity" höher als das erste.

Ich möchte aber, dass alle die selbe Höhe haben und ich die Länge variieren kann.

Formular:

<form class="wc-alchemy" action="" method="post" style="width: 490px; margin: auto;">
    <fieldset>
        <legend>Witchcraft Alchemy Calculator</legend>
            <label>Select Charm:</label>
                 <select name="recipe">
                    <option value="Speed Charm">Speed Charm</option>
                    <option value="Dark Curse Charm">Charm of Dark Curse</option>
                 </select>

        <input type="text" name="quantity" placeholder="Quantity">

        <input type="submit" value="Calc">
    </fieldset>
</form>

CSS:

.wc-alchemy fieldset {
  padding: 1em;
  width: 30em;
  border: 0.1em solid #000;
}

.wc-alchemy legend {
  font-size: 1.5em;
}

.wc-alchemy label {
  width: 5em;
  text-align: right;
  margin-right: 1em;
}

.wc-alchemy input {
  font-size: 1em;
  width: 4em;
  height: 1.4em;
  margin-right: 0.5em;
}

.wc-alchemy input[type=submit] {
  height: 1.5em;
}

.wc-alchemy select {
  width: 12em;
  height: 2em;
  margin-right: 0.5em;
}

[monolith]

Und warum kannst du nicht mit px-Angaben arbeiten?

http://jsfiddle.net/a4ues2nr/

Betreff em:

Die Einheiten em und ex sind abhängig vom Font und können innerhalb eines Dokumentes unterschiedlich sein. Die Einheit em ist einfach nur die Schriftgröße. Innerhalb eines Elements mit einem 2in Font, 1em bedeutet genau 2in. Ausdrücke wie margins und paddings sind von em abhängig, und wenn der User einen großen Font verwendet (z.B. auf einem großen Monitor) oder einen kleinen Font (z.B. auf einem mobilen Gerät), werden Größen proportional korrekt dargestellt. Festlegungen wie 'text-indent: 1.5em' und 'margin: 1em' sind sehr gebräuchlich in CSS.

Quelle: http://www.w3.org/Style/Examples/007/units.de.html

[rodaN]

Da ich dachte, dass man mittlerweile eigentlich nur noch EM benutzt um "responsive designs" zu erstellen. Deswegen versuche ich überall mit EM zu arbeiten. Aber anscheinend gehe ich da ein wenig falsch an die Sache heran.

Wie ich gelesen habe, ist es schwer die "option-list" mit CSS alleine zu stylen? Nun sind zwar alle auf der gleichen Höhe (denke ich mal ) aber die zwei Felder sind nicht mit der "option-list" bündig und sind ein wenig Höher.

Wie löst man dieses Problem?