无法将锚标记与文本输入放在同一行答案

【问题标题】：Cannot place anchor tag on same line as text input无法将锚标记与文本输入放在同一行
【发布时间】：2017-03-23 15:50:34
【问题描述】：

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

// 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 组合，而是包含未注释的锚标记，也没有关系。

【问题讨论】：

使用jQM网格系统。
网格系统导致将整个页面/包含的div分成两半、三等分。
不，它不会分割整个页面/容器。 demos.jquerymobile.com/1.4.5/grids
如果我为此使用了网格，那么我会有一行，其中一半宽度包含文本输入，而另一半只有图标。使用 DaniP 的解决方案，文本输入跨越屏幕的最大宽度，直到锚标记。

标签： jquery html css jquery-mobile

【解决方案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 它只是在这里需要它的 sn-p}

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

【讨论】：

这适用于 Chrome，但输入字段没有跨越可能的最大宽度。为了使它与我表单中的其他文本字段保持一致，如果它可以跨越最大宽度会很好。在 Firefox 上，锚标记与输入字段不对齐。
@user2233706 只是为了澄清ui-field-contain 是这个输入的父级？
我只将那个 div 添加到那个输入组中，只是因为我认为需要将两个元素放在同一行上。如果我不需要它，我就不需要它。
请注意，并非所有移动浏览器都支持 flex。
@Omar thx 注意，实际上对于移动设备，我唯一能看到的不支持是 Opera12 caniuse.com/#feat=flexbox ...问题出在 IE 上

【解决方案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>

【讨论】：