水平选择全宽 jQuery Mobile答案

【问题标题】：horizontal select full width jQuery Mobile水平选择全宽 jQuery Mobile
【发布时间】：2014-07-01 19:02:14
【问题描述】：

我试图询问用户的生日，但遇到了一些风格问题。

你应该能从这个http://jsfiddle.net/DjsWv/14/了解我的问题

我开始：

         <fieldset data-role="controlgroup" data-type="horizontal">
            <legend>Date of Birth:</legend>
            <select name="select-choice-month" id="select-choice-month" data-icon="false">
                <option >Month</option>
                <option value="jan">Jan</option>
            </select>
            <select name="select-choice-day" id="select-choice-day" data-icon="false">
                <option >Day</option>
                <option value="1">1</option>
            </select>
            <select name="select-choice-year" id="select-choice-year">
                <option >Year</option>
                <option value="2011">2012</option>
            </select>
        </fieldset>

这里的问题是我不喜欢宽度不是满或 100%

我看到的唯一解决方案是使用导航栏，这对我来说看起来并不讨人喜欢......关于如何让这个水平控制组显示为完整/标准宽度的任何想法

【问题讨论】：

标签： jquery html css jquery-mobile

【解决方案1】：

工作示例：http://jsfiddle.net/Gajotres/PUVkw/

HTML

<fieldset data-role="controlgroup" data-type="horizontal" class="custom-fieldset">
    <legend>Date of Birth:</legend>

    <select name="select-choice-month" id="select-choice-month" data-icon="false">
        <option >Month</option>
        <option value="jan">Jan</option>
    </select>

    <select name="select-choice-day" id="select-choice-day" data-icon="false">
        <option >Day</option>
        <option value="1">1</option>
    </select>

    <select name="select-choice-year" id="select-choice-year">
        <option >Year</option>
        <option value="2011">2012</option>
    </select>
</fieldset>

CSS

.custom-fieldset .ui-controlgroup-controls {
    width: 100% !important;
}

.custom-fieldset .ui-controlgroup-controls .ui-select {
    width: 33.33% !important;
}

不要忘记在你的字段集中添加一个自定义类名，在我的例子中它被称为：custom-fieldset

编辑

下面的 ericjbasti 评论是带有自定义 id 且没有 !important 的解决方案：http://jsfiddle.net/Gajotres/PUVkw/1/

【讨论】：

这个答案是正确的，但我唯一的建议是给字段集一个 ID，这样你就不必使用 !important
谢谢！像魅力一样工作。

【解决方案2】：

没有必要覆盖任何样式。您甚至可以在表单中使用导航栏行为。

见：jQuery Mobile: Full width of <select>s fieldgroup

【讨论】：

【解决方案3】：

我并不热衷于使用上面的导航栏解决方案，因此寻找更干净的 CSS 覆盖。看不到 !importants，如果您不将它们包装在全角元素中，它们不会干扰 jQuery Mobile 主题。

HTML

<div class="full-width">
   <div class="ui-field-contain country-select">
      <label for="countrySelect" class="ui-screen-hidden">Select Country</label>
         <select id="countrySelect" data-native-menu="false">
            <option class="default-option">Select Country</option>
         </select>
   </div>
</div>

CSS

.full-width .ui-field-contain .ui-select {
   width: 100%;
}

【讨论】：