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

【问题标题】：Want joined input tag and icon button on single row想要在单行上加入输入标签和图标按钮
【发布时间】：2017-06-26 07:27:52
【问题描述】：

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

注意，我可以将输入框和附加的加号按钮放在列表视图之外 - 输入框和加号放在一起很重要。

谁能帮忙？

尝试使用控制组：

<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>

【问题讨论】：

你的意思是“我很好，输入框和附加的加号按钮位于列表视图之外”`？在您的代码中，它们位于列表视图中。也许您只需要一个列表视图项内的输入框，因为列表视图可以在右侧已经有按钮，请参见此处：Listview with split buttons
带有拆分图标的列表视图很简单。该问题专门询问输入标签，并在侧面加入一个按钮。示例存在于 jquery-mobile 网站上的 controlgroup 和 fieldcontain 下，但尽我所能，当我将输入和按钮放在网格中时，会在输入和按钮之间插入回车。
如果输入标签在

标签： html jquery-mobile jquery-mobile-listview jquery-mobile-button

【解决方案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 的生活方式，并使用拆分图标作为您需要的正确输入按钮：

片段：

/* 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 内使用列表视图的标记是性能杀手，也许您应该重新考虑一下布局。

【讨论】：

这看起来很棒，感谢最后的性能提示。我将在接下来的几天里出差，所以我可能会在一周后回来提出一个后续问题 - 但现在，你在上面写的内容正是我想要的，并且足够清楚让我理解（我认为）。干杯