輸入和格對齊

Question

我想對齊複選框和我創建

<input type="checkbox"/>Item name 
 
    <span>Description</span>          
 
    <div id="spinner-container"> 
 
     <input id="inner-spinner"/> 
 
     <div class="nav"> 
 
      <div class="up">+</div> 
 
      <div class="down">-</div> 
 
     </div> 
 
    </div>

我怎樣才能使跨度標籤的說明旁的旋容器逗留微調？

Answer 1

#spinner-container #inner-spinner{ 
 
height:30px; 
 
} 
 
.nav{ 
 
display:inline-block; 
 
position: relative; 
 

 
} 
 
.nav > .up ,.down{ 
 
position: absolute; 
 
text-align:center; 
 
width:20px; 
 
border:solid 1px #A9A9A9; 
 
left:-5px; 
 
color:#fff; 
 
height:16px; 
 
cursor:pointer; 
 
} 
 
.nav >.up{ 
 
top:-22px; 
 
background-color:green; 
 

 
} 
 
.nav >.down{ 
 
top:-4px; 
 
background-color:red; 
 

 
}

<input type="checkbox"/>Item name 
 
    <span>Description</span>          
 
    <div id="spinner-container"> 
 
     <input id="inner-spinner"/> 
 
     <div class="nav"> 
 
      <div class="up">+</div> 
 
      <div class="down">-</div> 
 
     </div> 
 
    </div>

Answer 2

您設置div的顯示爲 'inline-block的'

#spinner-container{ 
    display: inline-block; 
} 

也許藏漢必須調整垂直對齊和邊距。但那取決於。