nicht angemeldet
Hallo!
Ich versuche in einem Formular drei Buttons (ein als Button getarnter Link links, daneben ein input Button und rechts ein submit Button) nebeneinander anzuordnen. Leider befinden sie sich nie auf gleicher Höhe.
Zu dem vertical-align Problem habe ich schon einiges gelesen. Nur leider halfen mir die Lösungen mit line-height auch nicht weiter.
Hier mal ein Versuch von mir:
<style type="text/css">
.textBlock_buttonPanel a, .textBlock_buttonPanel input {
border: 1px dotted #000000;
background:#dbdbdb;
text-align:center;
color:#474747;
padding:2px;
font-size:80%;
}
.textBlock_buttonPanel {
height:2em;
line-height:2em;
}
.textBlock_button_left {
float:left;
vertical-align:middle;
}
.textBlock_button_middle {
float:left;
padding-left:2em;
vertical-align:middle;
line-height: 5em;
height:5em;
}
.textBlock_button_middle input {
vertical-align:middle;
}
.textBlock_button_right {
float:right;
vertical-align:middle;
}
</style>
<div class="textBlock_buttonPanel">
<span class="textBlock_button_left"><a href="">Back</a></span>
<span class="textBlock_button_middle"><input type="button" value="Clear this form" onClick="clearForm()"></span>
<span class="textBlock_button_right"><input type="submit" name="action" value="Next"></span>
</div>
Zwar reagiert anscheinend der Link auf vertical-align:middle, nicht aber die input Buttons.
Ganz ohne vertical-align zu arbeiten und die Elemente einfach oben ausrichten zu lassen bringt auch nicht, da im Link als oberster Punkt der Text an sich betrachtet wird und im Button die Umrandung. Somit ist der Link immer ein wenig nach oben versetzt (darum mein Versuch mit vertical-align:middle).
Abhilfe wäre ein Layout an Hand einer Tabelle, was ich aber gerne vermeiden würde.
Hätte jemand vielleicht einen Tip für mich? z.B. wie ich die input Elemente vertikal mittig bringe, und dies auch noch beim Textverkleinern/vergrößern bestehen bleibt?
Gruß,
Kai