Question

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

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

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％。当页面大小小于448像素时，标签会堆叠在输入上方。

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

Answer 2

从jqm 1.4.5开始，我发现一个简单的方法是在jqm css加载后插入下面的css。只需更改＆＃34; #myForm＆＃34;以及适合您需要的任何东西。也似乎工作正常而不必使用id属性。

<强> CSS

@media (min-width:28em) {
    #myForm .ui-field-contain {
        min-height:2.5em;
    }
    #myForm .ui-field-contain > label {
        position:absolute;
        width:10em;
     }
    #myForm .ui-field-contain > label ~ [class*=ui-] {
        position:absolute;
        right:0;
        left:10em;
        width:auto;
    }
}

公平警告，我是你应该问的最后一个人，这是最好的做法，所以请自担风险。

JQuery Mobile - 设置字段包含标签宽度

2 个答案: