JQueryMobile - 设置 fieldcontain 的标签宽度

Question

我谷歌了很多，这似乎是一个普遍的问题。过去我使用 <table> 解决了这个问题，我知道 JQM 有某种 data-grid但我想通过 CSS 解决它。

问题很简单:我有n字段集，由 <label> 组成和一个 <input> ，我想将所有标签/输入对齐在一起，例如:

First:         [ input ]
Second:        [ input ]
Third:         [ input ]
...
Loooong-one:   [ input ]

这是一个问题示例:Fiddle

HTML

<div data-role="content">
    <div data-role="fieldcontain">
        <label for="first">First:</label>
        <input type="text" name="first" value="something" />
    </div>
    <div data-role="fieldcontain">
        <label for="second">Second:</label>
        <input type="text" name="second" value="something" />
    </div>
</div>

CSS

div[data-role='fieldcontain'] label{
    background: blue;
    width: 200px !important; /* this is not working :( */
}

如您所见，我想为所有 200px 指定固定宽度(例如 <label> )元素。添加蓝色背景只是为了测试我正在使用的 css 选择器的正确性。

Answer 1

您需要将 id 添加到输入中，以便标签正确关联:

    <div data-role="fieldcontain">
        <label for="first">First:</label>
        <input type="text" id="first" name="first" value="something" />
    </div>
    <div data-role="fieldcontain">
        <label for="second">Second:</label>
        <input type="text" id="second" name="second" value="something" />
    </div>

然后您的标签将自动以相同的宽度排列；但是，当页面大于 448px 时，fieldcontain 元素会导致标签占页面的 28%，输入占页面的 72%。当页面大小小于 448px 时，标签堆叠在输入上方。

在这种情况下，您的 CSS 设置标签宽度将起作用，但由于输入设置为 78%，您将无法获得所需的结果。如果 28%/78% 分割确实不适合您，您应该放弃 fieldcontain 元素并实现您自己的与 float 内联显示的 div。