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/