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

复选框和相关文本占用不同数量的垂直空间。您指向的额外空间是两个元素沿其box的顶部边缘排列的结果。

假设您希望文本和输入具有相同的基线，并且文本与左边缘对齐，复选框与右边缘对齐，完成的标记和 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 对齐。复选框不一定必须有与之关联的标签，只需确保它具有可访问性需求的用户的标题。

对不起，我不能给你一个确切的分辨率，它所写的语言对我来说也很难读，如果你能提供一个实际的网址（完整的网页）我想在这种情况下你会得到更多的回应因为我们可以使用 Chrome 的 Inspect Element 之类的东西。不要误会，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 回答