jquery - 无法将 anchor 标记与文本输入放在同一行

Question

我无法在文本输入旁边放置 anchor 标记:

// 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， anchor 标签依然在下一行。如果我没有 anchor 标记和 div 组合，而是包含未注释的 anchor 标记，这也没有关系。

Answer 1

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

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