Проблема с позицией кнопки в заголовке

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

Просто оберните свои левые и правые группы кнопок во встроенных классах 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.

Вот еще одна ссылка высшего качества: Как получить контрольную группу только для значков внутри заголовка?

Answer 2

Этот подход использует положение: относительное относительно родительского элемента и положение: абсолютное значение для компонента, который нужно переместить вправо.

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