排队列表与复选框

现在我有这样的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="https://stackoverflow.com/users/sign_up" class="login-link">Регистрация</a> 
    </li> 
    <li> 
    <a href="https://stackoverflow.com/users/sign_up" class="login-link">Забыли пароль?</a> 
    </li> 
</ul>

都在这里： http://jsfiddle.net/4GtKQ/

也看到图像：

但为什么我收到“Запомнитьменя”和“Регистрация”之间的这种距离？如何设置它们在正常的线网格？

来源

2012-12-21 brabertaser19

我无法看到图像和关系，即小提琴页 –

@MarkSchultheiss调整中的jsfiddle – brabertaser19

预览子窗口为什么要关闭？问题很好！问题通常被描述！ – brabertaser19

复选框和关联的文本占据了不同数量的垂直空间。你指着额外的空间是两个元素沿其箱的顶边排队的结果。

假设你想要的文字和输入具有相同的基线和与左边缘与右边缘对齐复选框对齐文本，成品标记和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-21 21:14:51 cimmanon

谢谢，你也可以看看我的页脚吗？为什么在每个页面上它的边距都是不一样的？ – brabertaser19

这显然是因为复选框的，我相信你能得到它周围的方式，但我建议您将它们分离出来是单独的元件，然后排队它们与CSS。复选框不一定要有与其关联的标签，只要确保它对具有辅助功能需求的用户具有标题即可。

对不起，我不能给你一个确切的解决方案，如果你可以提供一个真正的网址（完整的网页），我认为在这种情况下，更多的回应，因为我们可以使用诸如Chrome的Inspect Element之类的东西。 JSfiddle不错，但这是一个例外。

来源

2012-12-21 21:04:24

有没有很好的理由*不*有一个复选框相关的'label'。拥有与复选框关联的“标签”可以极大地提高可用性，特别是对于灵巧性较差的用户（文本块比点击复选框更容易点击）。 – cimmanon

它是从青菜+ HAML – brabertaser19

我原则上同意，这的确应该有一个标签产生的，但在这种情况下，我要说的是，你可以花很长的时间与此摆弄，并在转圈圈（我的作者已经完成）。 –

-3

<li style="position:relative; top: -5px;"> 
<a href="https://stackoverflow.com/users/sign_up" class="login-link">Регистрация</a> 
</li>

来源

2012-12-21 21:14:16 HMarioD

永远不会使用相对定位来解决这种问题，其中明文流可以以非常好的方式解决所有问题。 – s1lence

排队列表与复选框

回答

相关问题