Question

如何在按钮组内的两个固定宽度按钮包围的情况下选择填充整个屏幕？

<div data-role="fieldcontain">
    <ul data-role="controlgroup" data-type="horizontal">
        <li><button type="submit">&lt;</button></li>

        <li><select name="select-mes" id="select-mes">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
        </select></li>
        <li>
            <button type="submit">&gt;</button>
        </li>
    </ul>
</div>

这会创建一个与左侧对齐的小按钮栏。我希望中间的选择填充剩余的空间（这将是依赖于屏幕的变量）

我的例子的小提琴： http://jsfiddle.net/kelmer/kq1r33nz/

Answer 1

我对您的HTML结构进行了一些更改。

<div class="ui-content">
    <div class="ui-field-contain">
        <div data-role="controlgroup" data-type="horizontal">
            <button type="submit">&lt;</button>
            <select name="select-mes" id="select-mes">
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
            </select>
            <button type="submit">&gt;</button>
        </div>
    </div>
</div>

首先，将display: table添加到 controlgroup 内部包装器.ui-controlgroup-controls。对于内部元素，请添加table-cell并移除浮动display: table-cell，使其成为float: left。

.ui-controlgroup-horizontal .ui-controlgroup-controls {
    width: 100%;
    display: table;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls > * {
   display: table-cell;
   float: none !important;
}

.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
    width: 100%; /* let selectmenu occupy available width */
}

Demo ui-field-contain包裹 controlgroup
没有ui-field-contain
的
Demo

jquery mobile选择填充剩余空间

1 个答案: