Question

我无法在文本输入旁边放置锚标记：

// Having this does not make a difference
//$( "#id_test" ).textinput( "option", "wrapperClass", "input-width" );

.input-width {
  width: 200px;
}

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
  
  <!-- Having this instead of the above a and div tags makes no difference -->
  <!-- <a href=#>Learn more</a> --> 
</div>

即使取消注释JS代码并且字段宽度为200px，锚标记仍然在下一行。如果我没有锚标记和div组合并且包含未注释的锚标记也没关系。

Answer 1

Jquery mobile在input元素周围创建一个包装器，因此您需要更改这些容器的样式以删除块行为：

.ui-input-text {
  display: inline-block;
}

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>

更新

使用flexbox，您可以使input占用所有可用空间，如下所示：

_{请注意，您不需要！important它就在这里需要它的片段}

.ui-field-contain {
  display:flex !important;
}
.ui-input-text {
  flex:1 1 auto;
}

<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>
<div class="ui-field-contain">
  <input id="id_test" maxlength="7" name="test" placeholder="Enter input" type="text" />
  <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>

Answer 2

试试这个：

.controlgroup-textinput {
  border-width: 1px !important;
  padding: .25em 0 !important;
  border-bottom-style: solid !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.controlgroup-textinput.ui-input-text {
  background-color: #ffffff !important;
}
.controlgroup-textinput input {
  background-color: #ffffff !important;
}

<!DOCTYPE html>
<html>
<head>
  <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 data-role="page">
  <div data-role="header" data-position="fixed"><h2>Header</h2></div>	
  <div role="main" class="ui-content">
    <div data-role="controlgroup" data-type="horizontal">
      <input id="test" name="test" type="text" maxlength="7" placeholder="Enter input" data-wrapper-class="controlgroup-textinput ui-btn">
      <a href="#some-help" data-rel="popup" data-transition="pop" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-icon-notext ui-icon-info" title="Learn more">Learn more</a>
    </div>
  </div>
  <div data-role="footer" data-position="fixed"><h2>Footer</h2></div>    
  <div data-role="popup" id="some-help">
    <p>Some help here</p>
  </div>
</div>
</body>
</html>

无法将锚标记放在与文本输入相同的行上

2 个答案:

更新