要将元素并排放置,请使用ui-grid
布局。对于两个项目,将类添加ui-grid-a
到 div。然后首先用 div 和 classui-block-a
和另一个 class包装ui-block-b
。
演示
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
可选 - 覆盖子 div 的宽度。
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
对于输入,您需要通过 jQuery 或 CSS 调整输入的父 div 的高度。
注意: Slider 也有type=number
属性,因此,您只需要覆盖具有 class 的输入框ui-input-text
。
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');