5

フィドルで必要なものを説明する方が簡単です：http：//jsfiddle.net/mZrYG/1/

ご覧のとおり、出力画面が完全に拡張されると、サインインボタンがラベルの下の行に配置されます。チェックボックスが左揃えになり、ボタンが同じ行に右揃えになるように取得しようとしています。私のCSSの何が問題になっていますか？

繁栄のために：

<div class="row">
   <div class="span3">
      <form class="signin" method="POST">
         <input type="text" placeholder="Username" name="username" />
         <input type="password" placeholder="Password" name="password" />
         <label class="checkbox">
         <input type="checkbox" name="form[remember]" /> Remember me
         </label>
         <button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button>
      </form>
   </div>
</div>​
4

4 に答える 4

4

デモ

こんにちは今display:inline-blockあなたのラベルで使用されます

このように

label {
    display: inline-block;
    margin-bottom: 5px;
    vertical-align: top;
}
于 2012-11-20T04:19:51.933 に答える
3

左端の要素を最初に書き込む必要があるため、1。チェックボックス/覚えておいてください2.入力ボックス3.サインインとして再配置しました

また、すべてのボックスの幅がspan12未満になるようにする必要があるため、上記の各1/2/3アイテム内にスパンクラスを追加しました。

  <form class="signin" method="POST">
      <label class="checkbox span2">
     <input type="checkbox" name="form[remember]" /> Remember me
     </label>
     <input type="text" placeholder="Username" name="username" class="span3"/>
     <input type="password" placeholder="Password" name="password" class="span3"/>
      <button class="btn btn-mini btn-primary" type="submit">Sign in</button>
  </form>

</ p>

したがって、上のボックスは同じ行にありますが、各cssクラス（つまり、チェックボックスと2つの入力）の「line-height」パラメーターを試して、完全にまっすぐに配置されていることを確認する必要があります。

于 2012-11-20T04:43:38.753 に答える
1

float:left;入力、ラベル付け、ボタンにこれを行うことができます

またはクラスを追加しますfleft

.fleft{
   float:left;
}

またはこれだけが必要な場合

ここに画像の説明を入力してください

試してみるより

<label style="float:left;" class="checkbox">
于 2012-11-20T04:17:07.213 に答える
0

オプション1：

<label class="checkbox">
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary" type="submit">Sign in</button>
</label>

オプション2：

<label class="checkbox">
<input type="checkbox" name="form[remember]" /> Remember me 
<button class="btn btn-mini btn-primary pull-right" type="submit">Sign in</button>
</label>
于 2012-11-20T09:46:17.167 に答える