html - 用复选框排列列表

Question

现在我有了这段 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/

另见图片:

但为什么我在“Запомнить меня”和“Регистрация”之间有这样的空间？如何设置成普通的线格？

Answer 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/