如何在一行中正確對齊div的內容？

Question

.up, .down{ 
 
    font-size:6px; 
 
    display:block; 
 
    height:10px; 
 
} 
 
span{ 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="rotator"> 
 
     <span><input type="text" class='Rbox' value="0" /></span> 
 
     <span> 
 
     <input class='up' value="&#9650;" type="button" /> 
 
     <input class='down' value="&#9660;" type="button" /> 
 
     </span> 
 
</div>

正如你所看到的，雖然我是能夠把內容DIV肩在一條線，我仍然無法給它一個平滑的排列。

Answer 1

給vertical-align: top;跨度將解決您的問題。

檢查

.up,.down{ 
 
    font-size:6px; 
 
    display:block; 
 
height:10px; 
 
} 
 
span{ 
 
     display: inline-block; 
 
     vertical-align:top; 
 
}

<div class="rotator"> 
 
     <span><input type="text" class='Rbox' value="0" /></span> 
 
     <span><input class='up' value="&#9650;" type="button" /> 
 
     <input class='down' value="&#9660;" type="button" /></span> 
 
    </div>

Answer 2

可以使用

.span{ 
    display: inline-block; 
    vertical-align: middle; 
} 

更在vertical align

Answer 3

閱讀本vertical-align: middle; CSS屬性添加到了父和下課。