開発メモ,主に補足by子連れ親父プログラマー

2010-03-14

2つのsubmitボタンを横にまっすぐ並べる方法

まあ、よくある話なんですが、問い合わせフォームみたいなもので以下のようなボタンが2つ並んだソースがデザイナーさんから送られてきたりする訳です。
<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;
}

一応、デザインさんに修正依頼する時間もない時のために。

このブログを検索

Powered by Blogger.

ラベル

php (17) jQuery (13) OSX (10) MySQL (8) Javascript (7) Postgres (7) port (7) apache (6) Java (3) Smarty (2) html (2) pear (2) FCKEditor (1) XAMPP (1) css (1) git (1) perl (1) ruby (1)

Facebookバナー