html - jQuery Mobile 水平选择 - 最小宽度

Question

我无法弄清楚 CSS 为每个选择按钮提供最小或固定宽度。默认情况下，宽度会根据内容调整，但我希望有一个最小值。我有几行，我希望它们在选择更改时保持对齐。

对于非 jqm 选择框也有类似的问题，其中解决方案只是设置宽度属性，但这在这里不起作用。

这是jsfiddle：

http://jsfiddle.net/btppS/

Answer 1

如果要更改标签的宽度，则必须在 css 内更改此行：

.ui-btn-text{
   width:300px; //example
}

相反，如果您想在单击它时更改选择，您可以使用 jquery 尝试此代码：

$(document).ready(function() {
 $('#select-choice-month').css('width', '200px');//insert your width this is only for the month
});

Answer 2

有时 $(document).ready(..) 在 JQMobile 中并不是真正的正确位置（请参阅Mark Dalgleish的这个好链接）。但是要回答您的问题并且因为我有类似的问题，我使用了“pagebeforeshow”事件来做到这一点，因为在我的情况下，事件树中的“pagecreate”还不够。

所以我做了一些事情：

$('div[data-role=page]').live('pagebeforeshow',function(){ 
    $('.ui-select .ui-btn-text').css({'width':'60px'});
});