Как правильно упорядочить содержимое 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 для родителя вверх и вниз класс.