Question

＆＃13;

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

＆＃13;

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

＆＃13;

正如你所看到的，虽然我能够将内容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属性添加到上下类的父级。

如何在一行中正确对齐div的内容？

3 个答案: