Html\CSS - 无法将自定义 Select 标记与自定义复选框对齐

Question

我创建了几个自定义复选框，其中第一个元素也是 select 元素。我需要所有元素都在同一行，但为了减少每行之间的边距，我使用了 line-height=something 属性，但这会导致 select 元素的文本为distorted\cut，所以我手动降低了 select 的文本，但我也无法降低它的复选框。

HTML:

<div id="checkBoxesContainer">
    <input type='checkbox' value='valuable1' id="valuable1"/><label for="valuable1"><span></span></label>
    <div>
        <select>
            <option value="0">Test content</option>
            <option value="1">Content 1</option>
            <option value="2">Content 2</option>
            <option value="3">Content 3</option>
            <option value="4">Content 4</option>
        </select>
    </div>
    <input type='checkbox' value='valuable2' id="valuable2"/><label for="valuable2"><span></span></label><div>qwertyu</div>
    <input type='checkbox' value='valuable3' id="valuable3"/><label for="valuable3"><span></span></label><div>asdfghj</div>
    <input type='checkbox' value='valuable4' id="valuable4"/><label for="valuable4"><span></span></label><div>zxcvbnm</div>
    <input type='checkbox' value='valuable5' id="valuable5"/><label for="valuable5"><span></span></label><div>qazwsxe</div>
</div>

CSS:

/* for the custom checkboxes!! */
input[type=checkbox] {
    display:block;
    visibility: hidden;
}

label span
{
   background-color: grey;
    height: 20px;
    width: 20px;
    display:inline-block;
    cursor: pointer;
}
input[type=checkbox]:checked + label span
{
    background-color: red;
    height: 20x;
    width: 20px;
    display:inline-block;
    cursor: pointer;
}

#checkBoxesContainer{
    width: 500px;
    display: block;
    margin: 50px auto;
    font-size: 18px;
    line-height: 10px;
}

select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    -op-appearance: none;
    height: auto;
    padding: 0 35px 0 0;
    line-height: 25px;
    border: none;
    font-size: 18px;
    bottom: -15px;
    background:  url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png") no-repeat right center;
}
#checkBoxesContainer div{
    position: relative;
    width: 550px;
    left: 65px;
    bottom: 15px;
    color: #cfcecf;
    font-family: 'Open Sans', sans-serif;
    line-height: 5px
}

JSfiddle

编辑：这是 select 文本在行高降低时的样子：

Answer 1

我有点只是扔了一堆东西但这是我做的一些改变，不记得具体做了什么但是我们开始吧..

(从上到下在CSS)

输入[类型=复选框] - none

标签跨度 - none

input[type=checkbox]:checked + label span - none

复选框容器

已删除 line-height: 10px;

select

删除了 position: relative; 和 bottom: -15px;

已删除 line-height: 25px;

添加 margin-left: -10px; 到与 checkBoxesContainer div

中设置的左边距对齐的文本

checkBoxesContainer div

宽度减小到 width: 400px; 适合

添加了 vertical-align: top; 因此它以某种方式使顶部与复选框对齐

将行高从 5px 调整为 line-height: 20px;

删除了 position: relative; 和相关的 left: 65px; 和 bottom: 15px;

上面替换为 display: inline-block; 和..

已添加 margin-left: 20px; 使其远离复选框

我在下拉列表中添加了垂直间距..

option {
    margin: 5px 0px 5px 0px;
}

fiddle

http://jsfiddle.net/Hastig/Lu03xfp4/6/

Html\CSS - 无法将自定义 Select 标记与自定义复选框对齐

Html\CSS - unable to align custom Select tag along with a custom Checkbox

html

css

checkbox

html-select