JQueryMobile - 设置fieldcontain的标签宽度

我google了很多，这似乎是一个共同的问题。在过去，我使用<table>解决了这个问题，我知道JQM有某种data-grid，但我想通过CSS解决它。JQueryMobile - 设置fieldcontain的标签宽度

问题很简单：我有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选择器的正确性。

来源

2013-11-20 BeNdErR

你需要添加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。

来源

2013-11-20 15:36:00 ezanker

从jqm 1.4.5开始，我找到了一个简单的方法来做到这一点，即在jqm css加载后的某处插入以下css。只需将“#myForm”和“10em”改为适合您的需求即可。也似乎工作正常，而不必使用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; 
    } 
}

公平的警告，我是最后一个人，你应该问这是一个最佳实践，所以在你自己的风险。

来源

2017-01-19 06:28:43

JQueryMobile - 设置fieldcontain的标签宽度

回答

相关问题