13

簡単な質問であり、間違いなく簡単な解決策です。SO と Google をしばらく検索しても、見つけるのに苦労しています。

私がしようとしているのは、「拡張リストまたはプレミアム プロファイルに関心があります (詳細については、チームのメンバーが迅速に対応します)」というテキストのスニペットを取得し、小切手の右側に配置することだけです。ボックス (テキストを左揃え) にしますが、現在のように回り込まないでください。

これが私のJSFiddleです

コード (スタイリングに PureCSS を使用):

<form class="pure-form pure-form-aligned">
                    <fieldset>
                        <div class="pure-control-group">
                            <label for="name">Product Name</label>
                            <input id="name" type="text" placeholder="Username">
                        </div>

                        <div class="pure-control-group">
                            <label for="password">Contact Name</label>
                            <input id="password" type="text" placeholder="Password">
                        </div>

                        <div class="pure-control-group">
                            <label for="email">Contact Email</label>
                            <input id="email" type="email" placeholder="Email Address">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Website</label>
                            <input id="foo" type="text" placeholder="Enter something here...">
                        </div>

                        <div class="pure-control-group">
                            <label for="foo">Description:</label>
                            <textarea id="description" type="text" placeholder="Enter description here..."></textarea>
                        </div>                      

                        <div class="pure-controls">
                            <label for="cb" class="pure-checkbox">
                                <input id="cb" type="checkbox">
                                I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
                            </label>

                            <button type="submit" class="pure-button pure-button-primary">Submit</button>
                        </div>
                    </fieldset>
                </form>

どんな助けでも大歓迎です。ありがとう。

4

3 に答える 3

19

これが簡単な方法です。おそらく他にもあります。

<input id="cb" type="checkbox" style="float: left; margin-top: 5px;>">
<div style="margin-left: 25px;">
     I'm interested in an enhanced listing or premium profile,
     (a member of our team will respond promptly with further information)
</div>

を使用しdivてテキストを「ブロック」構造にし、右に移動しました。のは、チェックボックスをテキストの左側 (上ではない) に保持しますfloat: left。上の はinput、テキストとの上部の配置を微調整します。margin-topinput

フィドル。_

于 2013-09-11T01:09:04.223 に答える
2

チェック ボックスを左にフロートさせてから、「overflow: hidden;」を使用してテキストを div で囲みます。さらに、以下で行ったようにパディングを追加して、チェック ボックスからテキストに余裕を持たせることもできます (ただし、パディングはオプションです)。

<div class="pure-controls">
    <label for="cb" class="pure-checkbox">
    <input id="cb" type="checkbox" style="float: left;">
        <div style="overflow: hidden; padding: 0px 0px 0px 5px;">
             I'm interested in an enhanced listing or premium profile, (a member of our team will respond promptly with further information)
        </div>
</label>
    <button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
于 2013-09-11T01:09:45.833 に答える