将选择菜单的宽度与jquery中的文本输入字段匹配答案

【问题标题】：Match width of select menu with text input field in jquery将选择菜单的宽度与jquery中的文本输入字段匹配
【发布时间】：2012-05-03 20:40:47
【问题描述】：

我正在使用 jquery-mobile 从用户那里获取信息。我似乎无法将选择菜单的宽度与文本输入字段的宽度对齐。

在我的小提琴中，选择菜单应该与两个文本输入字段看起来相同。我能够匹配我的选择菜单的背景和边框颜色，使其看起来就像文本输入字段一样。但是当我调整选择菜单的宽度时，它与不同的手机和方向不一致。

注意：我不知道为什么，但我的 css 上的“.wide .ui-select .ui-btn”确实调整了选择菜单的颜色和边框，但它并没有在小提琴上做。不过，我不知道如何匹配不同浏览器的宽度。

提前致谢。

【问题讨论】：

【解决方案1】：

http://jsfiddle.net/DWTkD/2/

select {
    background: black;
    border: 2px solid white;
    color: #fff;
    padding: 2px;
    width: 123px;
}

【讨论】：

【解决方案2】：

如果没有应用 jQuery Mobile CSS，很难说，但我最好的猜测是box-sizing 可能不同，或者一些填充量正在改变它。如果您在某个地方有我们可以查看的实时版本，请分享。

【讨论】：

【解决方案3】：

标记为 class="wide" 的 dom 元素中的输入和选择使用它们的默认宽度。使用类似这样的东西来更好地控制它们的宽度：

.wide input, .wide select {
    width: 100%;
}

编辑 width: 100% 和 width: 123px 来调味。

【讨论】：

【解决方案4】：

这可能有效：

$(document).ready(function(){
    $.each($('select'), function () {
        $(this).selectmenu({ width : $(this).attr("width")})
    })
})

【讨论】：