5

有没有办法使用 jQuery Mobile 执行以下操作？

Hello [________________________]

而不是 jQuery Mobile 当前所做的，将这两个放在多行：

Hello

[________________________]

目前我正在创建我的文本和文本输入，如下所示：

<div id="customTagEntryDiv">
  <span id="userTag">Hello</span>
  <input type="text" name="customTagField" id="customTagField" value=""  />
  </div>
4

3 回答 3

18

是的，您可以，您需要使用现场容器，带有data-role="fieldcontain".

例如：

<div data-role="fieldcontain">
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" value=""  />
</div>

使用上面的代码，您应该得到如下内容：

文本输入：[ _ __ _ __ _ __ _ __ ]

而不是这样的：

文本输入：
[ _ __ _ __ _ __ _ __ ]

您可以将这种“格式”用于多种类型的元素：文本输入、单选按钮、选择菜单等。但是，我认为如果您的文本太长，在这种情况下，元素可能会自动转到下一行。 ..

鉴于你的例子，你可能想尝试这样的事情：

<div id="customTagEntryDiv" data-role="fieldcontain">
    <label id="userTag" for="customTagField">Hello</label>
    <input type="text" name="customTagField" id="customTagField" value=""  />
</div>

查看在线文档以获取更多信息：http: //jquerymobile.com/demos/1.1.1/docs/forms/textinputs/

希望这可以帮助。

于 2012-09-18T00:52:16.760 回答
0

float:left 可以解决问题。请参阅此示例，其中包含正常和小型字段的行：

http://jsfiddle.net/den232/WzH3Y/

    .floatleft {
    float:left;
 }
.floatright {
    float:right;
 }
.forceinline{  /* Prevent fieldcontain from doing a BLOCK thing */
    display:inline !important;
}
.textwidth {  /* limit width of input fields */
    width:80px;
}
.closespacing { /* controls spacing between elements */
    margin:0px 5px 0px 0px;
 }
.bigselect {   /* centers select with big buttons */
    padding: 0px;
    margin:2px 5px 0px 0px;
 }
.biginputheight {   /* matches text input height to big buttons */
    padding-top:10px !important;
    padding-bottom:12px !important;
}
.miniinputheight { /* matches text input height to minibuttons */
    padding-top:5px !important;
    padding-bottom:5px !important;
}
<div data-role="page" class="type-home">


<ul data-role="listview">
  <li  data-role="fieldcontain">first LI line</li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>
        Big Buttons<br>More Text
    </div>


    <div  class='floatleft textwidth'>
      <input type="text" placeholder="left" class='biginputheight'></input>
    </div>  

    <div  class='floatright textwidth'>
      <input type="text" placeholder="right" class='biginputheight'></input>
    </div>  

  </li>
  <li  data-role="fieldcontain">

    <div class='floatleft closespacing'>    
        Small Buttons
    </div>


    <div  class='floatleft textwidth'>
      <input type="text" placeholder="e2" class='miniinputheight'></input>
    </div>  


    <div class='floatright closespacing'>
      <div  class='floatright closespacing'>    
        e3 Text<br>on right
      </div>
      <div  class='floatright textwidth'>
        <input type="text" placeholder="e3" class='miniinputheight'></input>
      </div>  
    </div>
  </li>
  <li  data-role="fieldcontain">last LI line</li>

</ul><!-- /listview -->

于 2012-10-23T18:39:07.263 回答
0

这不再有效：

<div data-role="fieldcontain"></div>

老式桌子效果很好：

<table>
    <tr>
        <td>Label #1:</td>
        <td><input type="text"></td>
    </tr>
</table>
于 2017-10-21T19:21:24.313 回答