0

我正在尝试构建一个工具栏，其中包含这样的复选框。

<div class="toolbar"><div class="widget-toolbar">
        <ul class="items">

        <li class="toolbar-button item">
        Record
    </li><li class="toolbar-button item">
        Load
    </li><li class="toolbar-button item">
        Save
    </li><li class="toolbar-button item">
        Clear
    </li><li class="toolbar-checkbox item">
        <input type="checkbox" id="1369637447465" value="true">
        <label for="1369637447465" style="-webkit-user-select: none;">Continuous check</label>
    </li></ul>
    </div></div>

但正如您在这个小提琴http://jsfiddle.net/9WSpa/中看到的那样中看到的那样，它的 Result 在工具栏的 botder-top 和每个按钮的边框顶部之间有一个像素空间。现在，如果您从 ul 中删除复选框，则像素线消失并且一切正常。谁能告诉我，为什么复选框比其余的多消耗一个像素？

在此先感谢克里斯

4

3 回答 3

1

如果您使用开发人员工具检查单选按钮，您会发现 input[type=radio"] 有一个默认边距。这个边距是额外像素的来源。

user agent stylesheet input[type="checkbox"] {
margin: 3px 3px 3px 4px;
}

解决方案：

input[type="checkbox"] {
 margin: 0;
}
于 2013-05-27T07:25:08.313 回答
0

我不会说所有浏览器都是这种情况，但绝大多数浏览器都是如此。当涉及到单选和复选框输入时，它们通常具有默认的边距预设。

对于铬：

margin-top: 3px;
margin-right: 0.5ex;
margin-bottom: 3px;
margin-left: 0.5ex;

对于火狐：

margin-top: 3px;
margin-right: 3px;
margin-bottom: 3px;
margin-left: 4px;

话虽如此，我已经查看了您的代码，并注意到在 12px 的放置文本中设置的 css 错误，其中填充顶部和底部 2px 每个等于 16px 的总数，而取决于浏览器的复选框设置为大约 5px，边框不为 1px提到 3px 顶部和底部的边距为 18px。为了进行补偿，请使用以下内容修改预设。

.widget-toolbar .items input[type="checkbox"]{
    margin: 2px 0.5ex;
}
于 2013-05-27T07:56:50.537 回答
0

添加vertical-align:top到复选框

input{
    vertical-align:top
}

演示

为了解释检查这个类似的答案

于 2013-05-27T07:13:57.920 回答