Question

我正在使用jQuery Mobile，我有一个水平切换设置。

我想将它放在页面的中心，或我想拉伸它以便它占据宽度的100％。要么对我正在做的事情都有好处。我尝试了很多不同的方法，但到目前为止还没有。使用jQuery Mobile v1.0

    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" name="monday" id="monday" class="custom"/>
        <label for="monday">Monday</label>
        <input type="checkbox" name="tuesday" id="tuesday" class="custom" />
        <label for="tuesday">Tuesday</label>
        <input type="checkbox" name="wednesday" id="wednesday" class="custom" />
        <label for="wednesday">Wednesday</label>
        <input type="checkbox" name="thursday" id="thursday" class="custom" />
        <label for="thursday">Thursday</label>
        <input type="checkbox" name="friday" id="friday" class="custom" />
        <label for="friday">Friday</label>
        <input type="checkbox" name="saturday" id="saturday" class="custom" />
        <label for="saturday">Saturday</label>
        <input type="checkbox" name="sunday" id="sunday" class="custom" />
        <label for="sunday">Sunday</label>
    </fieldset>

Answer 1

Radio button not align properly at center in jquery mobile version 1.0?

将style="text-align: center;"添加到<fieldset>适用于带按钮的控制组，但显然不适用于复选框。

Answer 2

我刚遇到同样的问题，我通过将fieldset放在div text-align: center中，然后设置display fieldset来解决这个问题。 1}}到inline。

E.g。

<强> HTML

<div class="custom">
    <fieldset data-role="controlgroup" data-type="horizontal">
        <input type="checkbox" name="monday" id="monday" />
        <label for="monday">Monday</label>
        ...
    </fieldset>
</div>

<强> CSS

.custom {
    text-align: center;
}
.custom fieldset {
    display: inline;
}

将display的{{1}}设置为fieldset可能会产生一些其他影响，例如我注意到边距/填充略有变化，但除此之外我做了我想做的事情

无法水平居中水平切换集

2 个答案: