在div图层中定位文本

Question

如何将此按钮放在div的右侧？

<div>
  <h1>Sensors</h1>

  <h:form id="new_sensor_button">
    <p:commandButton value="New Sensor" id="ajax" styleClass="ui-priority-primary" />
  </h:form>
</div>

预期输出

Answer 1

根据几条评论和问题编辑进行更新。

今天最简单的方法是使用Flexbox来实现它，请参阅CSS中的注释

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: row;        /* align them side-by-side (is default so can be omitted ) */
  align-items: center;        /* vert. align items */
  max-width: 100%;
}

form#new_sensor_button {
  margin-left: auto;          /* right align form/button */
}

button {
  width: 100px;
  height: 40px;
  background: lightblue;
}

＆＃13;

<div class="container">
  <h1>Sensors</h1>

  <form id="new_sensor_button">
    <button value="New Sensor" id="ajax" styleClass="ui-priority-primary"></button>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;

如果无法定位表单，请执行以下操作

＆＃13;

＆＃13;

.container {
  position: relative;
  max-width: 100%;
}

button#ajax {
  position: absolute;
  right: 0;
  top: 50%;
  width: 100px;
  height: 40px;
  transform: translateY(-50%);
  background: lightblue;
}

＆＃13;

<div class="container">
  <h1>Sensors</h1>

  <form id="new_sensor_button">
    <button value="New Sensor" id="ajax" styleClass="ui-priority-primary"></button>
  </form>
</div>

＆＃13;

＆＃13;

＆＃13;