标题中的按钮位置有问题答案

【问题标题】：Trouble with button position in header标题中的按钮位置有问题
【发布时间】：2019-10-07 06:52:15
【问题描述】：

我的按钮位置有问题，我正在尝试向右对齐，但没有任何效果。如果有人会帮助我，我会感到自豪。下面是我页面中的代码

<div data-role="page" id="pag_busc_cliente">
<div data-role="header">
<div class="btn_head_buscar_cliente">
<a id="btn_Volver_Busqueda_Cliente" data-role="button" class="ui-btn btnvolver ui-icon-back ui-btn-icon-notext ui-corner-all ui-mini ui-shadow"></a>
<a id="btn_Crear_Cliente" data-role="button" class="ui-btn crearcliente ui-icon-user ui-corner-all ui-btn-icon-right ui-mini ui-shadow">Crear Cliente</a>
</div>
</div>
<div data-role="content">
<input type="search" name="buscar_cliente" id="buscar_cliente" placeholder="Busque Cliente" value="">
</div>
<div data-role="footer">
</div>
</div>

这是我要输入的 css 代码

.crearcliente
{
margin-left: 3px;
}

【问题讨论】：

标签： jquery jquery-mobile

【解决方案1】：

此方法在父元素上使用 position:relative 并在要向右移动的组件上使用 position:absolute。

https://codesandbox.io/s/ug9ov?fontsize=14

【讨论】：

【解决方案2】：

只需将您的左右按钮组包装在内置类ui-btn-left 和ui-btn-right 中：

<div data-role="page" id="pag_busc_cliente">
  <div data-role="header">
    <div class="ui-btn-left ui-mini">
      <a id="btn_Volver_Busqueda_Cliente" class="ui-btn ui-icon-back ui-btn-icon-notext ui-corner-all ui-shadow"></a>
    </div>
    <h4 class="ui-title"></h4>
    <div class="ui-btn-right ui-mini">
      <a id="btn_Crear_Cliente" class="ui-btn ui-icon-user ui-corner-all ui-shadow">Crear Cliente</a>
    </div>
  </div>
  <div data-role="content">
    <input type="search" name="buscar_cliente" id="buscar_cliente" placeholder="Busque Cliente" value="" />
  </div>
  <div data-role="footer">
    <h4 class="ui-title"></h4>
  </div>
</div>

顺便说一句，您还可以包装 ui-mini 类。

这是另一个高质量的参考：How to get an icon-only controlgroup inside the header?

【讨论】：