2

私は最近このように見えるフォームを持っています：

現在のフォーム

次に、ユーザーがサイトの条件に同意できるようにするチェックボックスとテキストを追加します。このチェックボックスとテキストを「送信ボタン」の左側に配置したいので、これが私が試したものです。

<form action="#" method="post" id="form" class="accept_form" style="display: block; ">
    <fieldset> 
        <div class="mail_from"> 
            <label for="from">Name</label> 
            <input class="mail" type="text" name="from" id="from"> 
        </div> 
        <div class="mail_to"> 
            <label>Last name</label> 
            <input class="mail" type="text" > 
        </div> 
        <div class="message"> 
            <label>Comment</label> 
            <textarea>I love this page, so I sign up</textarea> 
        </div> 
        <div class = "terms_button">
        <input type = "checkbox" name = "agree">
        <label for = "agree"> Accept the terms </label>
        <button type="submit">Send</button>
        </div>
    </fieldset>
</form>​​​​​​​​​​​​​​​​​​​​​​

だから、基本的に私は新しいdivを作成し、内部でそれらの要素を揃えようとしました。ただし、ご覧のとおり、チェックボックスとテキストは[送信]ボタンよりも上にあります。どうすればこれを解決できますか？

デモはここにあります：送信ボタンと位置合わせされていないチェックボックス

4

3 に答える 3

1

float: rightこのセレクターから を削除します。

form .terms_button button {
    float:right;
}

作業サンプル (唯一の変更は を削除することですfloat: right;) http://jsfiddle.net/ag44K/22/

于 2012-11-04T00:36:25.440 に答える
0

CSS プロパティは、vertical-alignおそらくあなたが探しているものです。詳細な議論については、W3.org の CSS2 仕様を参照してください。問題は、ラベルのテキスト サイズが (チェック ボックス要素の) 100% ではなく、おそらくボタン要素の境界線、パディング、およびフォント サイズから始まることです。 （特に、ズーム時に適切にスケーリングしたい場合）。

于 2012-11-03T21:22:07.393 に答える
0

唯一のヒント: 私はあなたのサイトを見て、あなたのコードを概説します。コミット ボタンに Float Right があることがわかります。新しいliアイテムを追加し、アイテムを float Right に設定すると、コミットの左側にアイテムを配置できると思います。コミットボタンの後にアイテムを追加するためのボタン。これがあなたを助けることを願っています...

于 2012-11-03T21:23:29.807 に答える