提问人：togarha 提问时间：5/21/2012 更新时间：5/21/2012 访问量：5606
jquery-mobile：某些行中的标签+输入+标签
jquery-mobile: label+input+label in some lines
问：
我有一个表单，其中包含一些我想在行中显示的输入，但它在宽度如此之小之前会中断行。代码如下：
<div data-role='fieldcontain' id='TempLimits'>
<label for='Tmin' style='display-inline;width:50px'> Min.:</label>
<input type='text' name='Tmin' id='Tmin' value='0' style='display:inline;width:50px' />
<label for='Tmin' style='display-inline;width:50px'> ºC</label>
<br>
<label for='Tmax' style='display-inline;width:50px'>Max.:</label>
<input type='text' name='Tmax' id='Tmax' value='60' style='display:inline;width:50px' />
<label for='Tmax' style='display-inline;width:50px'> ºC</label>
这些图片显示了我想保留的内容以及问题所在（我不能直接通过声誉发布）：
此外，有没有办法将标签对齐到输入的中心/底部而不是输入的顶部？
多谢
答：
4赞
Stefan Fandler
5/21/2012
#1
将 css 样式附加到元素中，这些元素会自动转到下一行。float: left
我认为这应该适用于第一行：
<label for='Tmin' style='width:50px'> Min.:</label>
<input type='text' name='Tmin' id='Tmin' value='0' style='float: left; width:50px' />
<label for='Tmin' style='float: left; width:50px'> ºC</label>
评论
0赞
togarha
5/21/2012
我删除了我的最后一条评论，因为是错误的。它适用于第一行，但我不知道如何制作新行以强制第二行执行相同的功能
0赞
togarha
5/21/2012
现在一切正常，只需使用段落非常感谢<div data-role='fieldcontain' id='TempLimits'> <p><label for='Tmin' style='float: left;width:50px'>Min.:</label> <input type='text' name='Tmin' id='Tmin' value='0' style='float: left;width:50px' /> <label for='Tmin' style='float: left;width:50px'> ºC</label></p> <p><label for='Tmax' style='float: left;width:50px'>Max.:</label> <input type='text' name='Tmax' id='Tmax' value='60' style='float: left;width:50px' /> <label for='Tmax' style='float: left;width:50px'> ºC</label></p> </div>
0赞
Stefan Fandler
5/22/2012
在使用段落之前，我建议使用 <span> 而不是 :)
1赞
togarha
5/22/2012
我会小心，实际上我只是通过display：inline-block更改float：left，结果相同，但我更喜欢这样。使用 display：inline-block 时，我不能使用 span，因为它不会在两个块之间断开线......
评论