Question

在以下代码中：

<p><input type="checkbox" /> Pavement
<input type="checkbox" /> Dirt or rocky trails
<input type="checkbox"/> Gravel roads</p>

以及以下CSS：

h1, input, button, textarea, progress, p, a, ul, li {
    font-family: "Open Sans", sans-serif;
    font-size: 10pt;
    color: #666;
    letter-spacing: normal;
    text-indent: 0;
    text-shadow: 0 1px 0 hsla(0,0%,100%,.75);
    margin: 10px 2px;
}

input[type="checkbox"], input[type="radio"] {
    background-color: #f4f4f4;
    background-image: -webkit-linear-gradient(90deg, hsla(0,0%,0%,.05), hsla(0,0%,0%,.01));
    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.5),
                0 1px 2px hsla(0,0%,0%,0.5);
    border: none;
    cursor: pointer;
    height: 16px;
    width: 16px;
    position: relative;
    -webkit-appearance: none;
}

复选框似乎与其他文本差不多一行。我尝试删除所有 CSS并解决了问题（当我删除所有自定义复选框样式时问题也解决了），但当我开始逐行删除/替换CSS时，我无法'找到问题。有任何想法吗？谢谢！

Answer 1

这是你的问题：

margin: 10px 2px;

Get rid of it and you're golden

或者，如果您想将其保留在某些元素上而不是复选框和单选按钮上，you could do something like this

h1, input, button, textarea, progress, p, a, ul, li {
  ...
  margin: 10px 2px;
}
input[type="checkbox"], input[type="radio"] {
  ...
  margin: 0px 2px;
}

Answer 2

在您的复选框中添加vertical-align: middle;应修复它。

即

input[type="checkbox"], input[type="radio"] {
...
   vertical-align: middle;
}

自定义复选框后的文本不在基线上

2 个答案: