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 には、ツールバーの上部と各ボタンの上部との間に 1 ピクセルのスペースがあります。ul からチェックボックスを削除すると、ピクセル ラインが消え、すべて問題ありません。チェックボックスが他のピクセルよりも 1 ピクセル多く消費する理由を教えてください。

前もってありがとうクリス

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

vertical-align:topチェックボックスに追加

input{
    vertical-align:top
}

デモ

説明については、この同様の回答を確認してください

于 2013-05-27T07:13:57.920 に答える