输入和格对齐

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

也许藏汉必须调整垂直对齐和边距。但那取决于。