Formular anpassen

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.

Gelöst habe ich es momentan so:

Code

.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: 5em;
  height: 26px;
  margin-right: 0.5em;
  border: 1px solid silver;
  box-sizing: border-box;
  padding: 0;
}




.wc-alchemy input[type=submit] {
  height: 26px;
}




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

Alles anzeigen

Das hat das Problem mit der selben Höhe behoben aber nun folgendes:

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 [Blockierte Grafik: http://www.php.de/images/smilies/icon_biggrin.gif]) aber die zwei Felder sind nicht mit der "option-list" bündig und sind ein wenig Höher.

Wie löst man dieses Problem?

Gastl

Zitat von rodaN

Momentan sieht es so aus: Bild

Wie man sieht

Bei mir wird nichts angezeigt.

djheke

Versuch's mal so

HTML

<!doctype html>
<html>
<head>
<title>Formular</title>
<meta charset="UTF-8">
<style>


* {
 margin:0;
 padding:0;
}


form {
 background:#eee;
 border:1px solid #999;
 margin:10px;
 padding:10px;
 float:left;
}


fieldset {
 padding:10px 10px 20px 10px;
}


input , label , select {
 padding:1px;
 border:1px solid #999;
 font:caption;
 display:inline-block;
 vertical-align:bottom;
}


label {
 border:none;
 vertical-align:top;
}
</style>
</head>


<body id="inhalt">
<form action="">
<fieldset>
    <legend>Witchcraft Alchemy Calculator</legend>
  <label for="vorname">Select Charm:</label>
    <select name="top5" size="1">
      <option>Speed Charm</option>
    </select>


 <input type="button" name="Button 1" value="Quantity">
 <input type="button" name="Button 2" value="Calc">
</fieldset>
</form>




</body>
</html>

Alles anzeigen

Tags