想要在单行上加入输入标签和图标按钮

Question

我已经尝试了各种排列，但我的结果总是将两个标签分成不同的行。基本上我想要一个输入框，在它旁边，我想要一个 + 图标按钮按钮（因此 + 不在输入框内，而是连接在右侧）。我怀疑某些继承规则让我感到悲伤，因为一些示例可以独立运行，但在网格内时会失败。

请注意，输入框和附加的加号按钮位于列表视图之外我没问题 - 输入框和加号放在一起很重要。

有人可以帮忙吗？

尝试使用控制组：

<div class="ui-grid-a">
    <div class="ui-block-a">
        <div class='ui-body'>
            <ul id="base1" class='ui-corner-all' data-role='listview' data-inset='true'>
                <li data-role="controlgroup" data-type="horizontal">
                <input name="name2" id="name2" class="width100" type="text">
                <a href="#" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-notext">+</a>
                </li>
                <li data-role="list-divider">Available Groups</li>
            </ul>                                                    
        </div>
    </div>
    <div class="ui-block-b">something else</div>
</div>

尝试使用 fieldcontain

<div class="ui-grid-a">
    <div class="ui-block-a">
        <div class='ui-body'>
            <ul id="base1" class='ui-corner-all' data-role='listview' data-inset='true'>
                <li class="ui-field-contain">
                <input name="name2" id="name2" class="width100" type="text">
                <a href="#" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-notext">+</a>
                </li>
                <li data-role="list-divider">Available Groups</li>
            </ul>                                                    
        </div>
    </div>
    <div class="ui-block-b">something else</div>
</div>

Answer 1

为什么你的布局中断了？要重新设置列表视图的样式，JQM 会搜索固定定义的标记链，例如

<ul> <li> <a> <-- main link is restyled as ui-btn <h1></h1> <-- title <p></p> <-- description </a> <a></a> <-- additional link is restyled as split-icon </li> </ul>.

所以我认为您应该让 JQM 完成这项工作，然后只覆盖您想要的样式。我的建议是遵循 JQM way-of-life，并使用 split-icon 作为您需要的正确输入按钮：

片段：

/* Style the text input */
.ui-listview > li > a.ui-btn {
  padding: 0 !important;
}
.ui-listview > li p {
  margin: 0 !important;
  padding: 0 !important;
}

.ui-input-text {
  margin: 10px !important;
}

/* jQM no frills */

.ui-listview > li > a:first-child.ui-btn, 
.ui-listview > li > a:first-child.ui-btn:hover,
.ui-listview > li > a:first-child.ui-btn:focus,  
.ui-listview > li > a:first-child.ui-btn:active,
.ui-listview > li > a:first-child.ui-btn:visited  {
  box-shadow: none !important;
  cursor: default;
  background-color: rgb(246, 246, 246) !important;

}

/* speed-up some android and iOS devices */
* {
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>

<body>
  <div id="page-1" data-role="page">
    <div data-role="header" data-position="fixed">
      <h1>Page one</h1>
    </div>
    <div role="main" class="ui-content" id="page-1-content">
      <ul id="base1" class="ui-corner-all" data-role="listview" data-split-icon="plus" data-inset="true">
        <li data-role="list-divider">Available Groups</li>
        <li>
          <a>
            <p>
              <input name="name1" id="name1" type="text">
            </p>
          </a>
          <a id="btn1"></a>
        </li>
        <li>
          <a>
            <p>
              <input name="name2" id="name2" type="text">
            </p>
          </a>
          <a id="btn2"></a>
        </li>
        <li>
          <a>
            <p>
              <input name="name3" id="name3" type="text">
            </p>
          </a>
          <a id="btn3"></a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

顺便说一句，只是一个额外的提示：请注意，恕我直言，您在网格内的 fieldcontain 中使用列表视图的标记是性能杀手，也许您应该重新考虑一下布局。

想要在单行上加入输入标签和图标按钮

Want joined input tag and icon button on single row

html

jquery-mobile

jquery-mobile-listview

jquery-mobile-button