Einheitliche Positionierung Buttons

Question

Hallo,

ich würde gerne einen backtopage und einen next Button links bzw. rechts am unteren Rand einer meiner Fragebogenseiten einfügen. Soweit hat das auch geklappt, jedoch sind die zwei Buttons nicht auf einer Höhe. Der backtopage Button ist etwas weiter nach oben versetzt, als der next button. Wie kann ich die Positionierung der Buttons in dem folgenden PHP-Code entsprechend anpassen?

html( '<div style="text-align: left">'.  buttonToPage('Reaktion', 'Zurück'). '</div>'); html( '<div style="text-align: right">'. buttonCode('next'). '</div>' );

Vielen lieben Dank im voraus!

Answer 1

Das liegt daran, dass <div> einen Block erstellt, der sich standardmäßig über die komplette Seiten-Breite erstreckt. Hier einmal zum Ansehen:

html( '<div style="text-align: left; border: 1px solid blue;">'.  buttonToPage('Reaktion', 'Zurück'). '</div>');
html( '<div style="text-align: right; border: 1px solid red;">'. buttonCode('next'). '</div>' );

Die Lösung besteht darin, die Breite des <div> auf 50% der Breite zu reduzieren und dem anderen </div> zu sagen, dass es rechts davon stehen darf.

html( '
  <div style="text-align: left; float: left; width: 50%; border: 1px solid blue;">'.buttonToPage('Reaktion', 'Zurück').'</div>
  <div style="text-align: right; width: 50%; border: 1px solid red;">'. buttonCode('next'). '</div>
');

Comments

Danke! Mit einer kleinen Modifikation hat das funktioniert.

Answer 2

Ich hatte ein ähnliches Problem. Mit dem Code, der in der vorigen Antwort vorgeschlagen wurde, landeten die Buttons bei mir immer noch auf unterschiedlichen Höhen; die Antwort hat mir dennoch den entscheidenden Anstoß gegeben, den richtigen Code zu finden. Ich habe folgenden Code ins PHP-Code-Feld eingegeben, nun sind beide Buttons auf gleicher Höhe:

option('backbutton', false);
html( '
  <div style="text-align: left; float: left; width: 50%;">'.buttonToPage('Reaktion', 'Zurück').'</div>
  <div style="text-align: right; float: right; width: 50%;">'. buttonCode('next'). '</div>
');