Link und Button nebeneinander anordnen (innerhalb einer div Box)

[tokoma]

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

[Kalle_B]

hast du schon versucht, alle Elemente 100% hoch zu machen?

Innerhalb eines <p> sollte das was bringen.

Kalle

[tokoma]

Habs mal probiert ... leider kein Unterschied.

Zur Vorgehensweise:

.textBlock_button_middle {
 float:left;
 padding-left:2em;
 vertical-align:middle;
 height:100%;
}

und das <div> durch <p> ausgetauscht.

[ritschmanhard]

Hi!

Nur so als Tip:
Vielleicht hilft es, einheitliche (Input) Elemente zu verwenden.
Dabei sei angemerkt, dass der "entfremdete" (back-) link auch durch:
<input (...) onclick="history.back()"> zu realisieren ist.
siehe hierzu auch:

http://de.selfhtml.org/javascript/objekte/history.htm

Grüße,
richard

[tokoma]

Das ist klar. Aber ich möchte Abstand von Javascript nehmen.

[Andreas]

Hm, so sieht's jetzt bei mir anständig aus:

<style type="text/css">
.textBlock_buttonPanel input {
 border: 1px dotted #000000;
 background:#dbdbdb;
 text-align:center;
 color:#474747;
 font-size: 80%;
 font-family: Arial;
 text-decoration: none;
 margin: 0px;
 padding: 2px 1em;
}
.textBlock_buttonPanel a{
 border: 1px dotted #000000;
 background:#dbdbdb;
 text-align:center;
 color:#474747;
 font-size: 80%;
 font-family: Arial;
 text-decoration: none;
 margin: 0px;
 padding: 3px 1em;
 display: block;
}
.textBlock_buttonPanel {
}
.textBlock_button_left {
 float:left;
}
.textBlock_button_middle {
 float:left;
 margin-left:2em;
}
.textBlock_button_middle input {
}
.textBlock_button_right {
 float:right;
}
</style>

Gruß,

Andreas

[tokoma]

Danke für die Antwort.
Bei deinem Beispiel wurde mir noch der Back Button zu groß angezeigt. Habe jetzt noch
.textBlock_buttonPanel {
 height:1.2em;
 line-height:1.2em;
}
gesetzt und jetzt sieht's gut aus.
Das display:block scheint jetzt irgendwie dafür zu sorgen, daß der Back Button Link so hoch ist wie line-height angibt. Warum ist mir zwar nicht ganz klar, aber das ist mir bei CSS vieles nicht.

Gruß,
Kai