标题中的按钮位置有问题
Posted
技术标签:
【中文标题】标题中的按钮位置有问题【英文标题】：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;
【问题讨论】：
【参考方案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?
【讨论】：
以上是关于标题中的按钮位置有问题的主要内容，如果未能解决你的问题，请参考以下文章