2つのsubmitボタンを横にまっすぐ並べる方法
<div class="controls">
<input type="button" value="戻る" />
<input type="submit" value="送信" />
</div>
まあ、これはこれでそのままでもちゃんと横に並んでくれるし、普通はcssでセンタリングしてあったり、多少マージンがとってあったり、ひどいのになると、ボタンとボタンの間に全角スペース入れてそれで間隔を調整してたり(笑)、そんな感じだと思います。
ただ実際プログラムを入れていくと、これでは用をなさないわけで、以下のようなソースにしたいという場合が多々あります。
<div class="controls">
<form action="form.php" method="post">
<fieldset>
<input type="hidden" name="mode" value="back" />
<input type="submit" value="戻る" />
</fieldset>
</form>
<form action="form.php" method="post">
<fieldset>
<input type="hidden" name="mode" value="send" />
<input type="submit" value="送信" />
</fieldset>
</form>
</div>
「戻る」時と「送信」する時とでモードを切り替えて処理したいような場合ですね。これの見た目はこうなってしまいます。
で、こういう時どうしたら、簡単に直せるか、ということですね。
まずこれはどうみてもformとfieldsetがブロック要素で右端まで行っちゃってるので、
form, fieldset {
display: inline;
border: none;
}
とします。あとは適当にマージンとかを調整します。
form, fieldset {
display: inline;
border: none;
margin: 0px;
padding: 0px;
}
一応、デザインさんに修正依頼する時間もない時のために。