设置宽度时日期输入显示错误答案

【问题标题】：Date input is displayed wrong when width is set设置宽度时日期输入显示错误
【发布时间】：2013-11-26 14:12:43
【问题描述】：

我正在尝试生成一个宽度为 150 像素的日期输入字段（我想要的行行为取决于屏幕的宽度）。

它在 Mac/Chrome 上运行良好（参见 jsFiddle），但是当我在 Android 上执行它时，它看起来像这样：

它在中间，因为 text-align 设置为右对齐。 150px 将是 1983 结束的地方。

我做错了吗？还是浏览器？在这种情况下，是否有解决方法？

PS：它也适用于 Mac/Firefox 和 Mac/Safari

【问题讨论】：

标签： android jquery html css jquery-mobile

【解决方案1】：

您的媒体查询使日期字段具有 100% 的宽度。如果您想更改此设置，请更改媒体查询中的宽度。

@media all and (max-width: 410px) {
    .dispInline {
        text-align: left;
        width:100%;
    }    
    .dispInlineDate {
        width: 150px;        
    }
}

【讨论】：

它只是改变包含日期输入字段的div的宽度
我不希望文本左对齐。我希望它在 Android 上以 150 像素的宽度显示，就像在 Mac/Chrome 上一样。
如果我想让它向左对齐，从其样式中删除 text-align:right 会更容易
我误解了你的问题。我已经更新了答案。请注意，内联样式被认为是不好的做法。
这是updated jsFiddle 与您的答案。如果你稍微改变一下窗口的宽度，你就会明白为什么这对我不起作用。

【解决方案2】：

我已经在.css中设置了：

.dispInlineDate {
    float:none;      
}

并从内联样式中删除了width:150px;。设置它会破坏文本位置。

现在可以了。另外，可以设置另一个 150px 的 div，那么它就是 150px。

【讨论】：