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; }
一応、デザインさんに修正依頼する時間もない時のために。