3

今私はこのhtmlコードを持っています：

<ul>
  <li>
    <input checked="checked" id="user_remember_me" name="user[remember_me]" type="checkbox" value="true">
    <div class="login-link">
      Запомнить меня
    </div>
  </li>
  <li>
    <a href="/users/sign_up" class="login-link">Регистрация</a>
  </li>
  <li>
    <a href="/users/sign_up" class="login-link">Забыли пароль?</a>
  </li>
</ul>

すべてここに：http： //jsfiddle.net/4GtKQ/

画像も参照してください：

https://dl.dropbox.com/u/59666091/checkbox.png

しかし、なぜ私は「Запомнитьменя」と「Регистрация」の間にそのようなスペースを確保しているのでしょうか。それらを通常のライングリッドに設定するにはどうすればよいですか？

4

3 に答える 3

1

チェックボックスと関連するテキストは、異なる量の垂直方向のスペースを占めます。あなたが指している余分なスペースは、両方の要素がボックスの上端に沿って並んでいる結果です。

テキストと入力のベースラインを同じにし、テキストを左端に揃え、チェックボックスを右端に揃えたいとすると、完成したマークアップとCSSは次のようになります。

HTML：

<li class="remember">
  <label>Запомнить меня 
    <input checked="checked" id="user_remember_me" name="user[remember_me]" 
           type="checkbox" value="true">
  </label>
</li>

CSS：

li.remember { 
    text-align: left;
}
li.remember input { 
    float: right;
}

http://jsfiddle.net/4GtKQ/1/

于 2012-12-21T21:14:51.310 に答える
0

これは明らかにチェックボックスのおかげであり、回避できると確信していますが、それらを別々の要素に分離してから、CSSと並べることをお勧めします。チェックボックスには、必ずしもラベルが関連付けられている必要はありません。アクセシビリティが必要なユーザー向けのタイトルが付いていることを確認してください。

申し訳ありませんが、正確な解決策をお伝えすることはできません。実際のWebアドレス（完全なWebページ）を提供できれば、それが書かれている言語を読むのも非常に困難です。この場合、より多くの回答が得られると思います。 ChromeのInspectElementなどを使用できるためです。誤解しないでください。JSfiddleは素晴らしいですが、これは例外です。

于 2012-12-21T21:04:24.260 に答える
-3 
<li style="position:relative; top: -5px;">
 <a href="/users/sign_up" class="login-link">Регистрация</a>
</li>
于 2012-12-21T21:14:16.690 に答える