0

次のコードでは:

<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;
}

チェックボックスは、他のテキストについてほぼ 1 行のように見えます。すべての CSS を削除しようとしたところ、問題は解決されました (カスタム チェックボックス スタイルをすべて削除すると問題も解決されます)。何か案は？ありがとう！

4

2 に答える 2

1

これはあなたの問題です：

margin: 10px 2px;

それを取り除くと、あなたは黄金です

または、チェックボックスやラジオボタンではなく、いくつかの要素にそれを保持したい場合は、次のようにすることができます

h1, input, button, textarea, progress, p, a, ul, li {
  ...
  margin: 10px 2px;
}
input[type="checkbox"], input[type="radio"] {
  ...
  margin: 0px 2px;
}​
于 2012-12-28T19:29:25.360 に答える
0

チェックボックスに追加vertical-align: middle;すると修正されます。

すなわち

input[type="checkbox"], input[type="radio"] {
...
   vertical-align: middle;
}
于 2012-12-28T19:30:35.220 に答える