jquery-mobile - 带有 jquery-mobile 的并排按钮

Question

我正在使用 jquery-mobile，我有这两个按钮：

<p id="propart">Pro:
    <select id="chosenpro" data-inline="true"></select>
    <button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button>
</p>

我希望它们并排显示（内联）。但我无法弄清楚。我这样做了，但它不起作用。你能帮我吗 ？这是我的CSS：

#propart .ui-select {
    width:75%;
}
#propart .ui-select .ui-btn-icon-right {
    width:100%;
}
#propart .ui-btn {
    width:25%;
}

Answer 1

使用ui-grid类，并覆盖它们的宽度。

演示

标记

<div class=ui-grid-a>
 <div class=ui-block-a>button 1</div>
 <div class=ui-block-b>button 2</div>
</div>

CSS

.ui-block-a { width: 75% !important; }
.ui-block-b { width: 25% !important; }

Answer 2

无需定义任何 CSS 规则。jqm 有Layout grids 你需要做的就是：

<div class=ui-grid-a>
 <div class=ui-block-a> <select id="chosenpro" data-inline="true"></select></div>
 <div class=ui-block-b><button type="button" id="resetbutton" data-inline="true" data-theme="w">Reset</button></div>
</div>