Question

我已经创建了多个自定义复选框，其中第一个元素也是select元素。我需要将所有元素放在同一行中，但为了减少每行之间的余量，我使用了line-height=something属性，但这会导致select元素的文本被扭曲\ 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）

输入[类型=复选框] - 没有

标签跨度 - 没有

输入[类型=复选框]：检查+标签跨度 - 没有

checkBoxesContainer

去除line-height: 10px;

选择

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

小提琴

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