Question

我在按钮位置上遇到麻烦，我正在尝试向右对齐，但是没有任何用处。如果有人能帮助我，我会感到骄傲。我的页面中的代码如下

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

Answer 1

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

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

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

标题中的按钮位置有问题

2 个答案: