对齐网页标题中的组件

Question

我想将此html代码与网页标题对齐：

<div>
<h1>Web_site_title</h1>

                <h:form>
                    <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink>
                </h:form>

                <h:selectOneMenu value="#{language.language}" onchange="submit()">
                    <f:selectItem itemValue="en" itemLabel="English" />
                    <f:selectItem itemValue="bg" itemLabel="Български" />
                </h:selectOneMenu>

                <h:form>
                    <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink>
                </h:form>
</div>

我想得到这个视觉效果：

我如何调整补语？

Answer 1

将display: flex与justify-content: flex-end一起使用，将元素推向右侧，align-items: center将元素垂直对齐。然后使用margin-right: auto上的h1将其推到左侧。

.flex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
h1 {
  margin-right: auto;
}

<div class="flex">
  <h1>Web_site_title</h1>

  <h:form>
    <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink>form
  </h:form>

  <h:selectOneMenu value="#{language.language}" onchange="submit()">
    <f:selectItem itemValue="en" itemLabel="English" />
    <f:selectItem itemValue="bg" itemLabel="Български" />select
  </h:selectOneMenu>

  <h:form>
    <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink>form
  </h:form>
</div>

Answer 2

最简单的方法是使用flex，其设置如下所示。左侧/右侧分布auto上的h1页边距右侧，align-items: center可用于所有项目的垂直居中。

.x {
  display: flex;
  align-items: center;
}

.x h1 {
  margin-right: auto;
}

<div class="x">
  <h1>Web_site_title</h1>

  <h:form>A
    <h:commandLink action="#{logoutController.logout}" value="Preferences"></h:commandLink>
  </h:form>

  <h:selectOneMenu value="#{language.language}" onchange="submit()">B
    <f:selectItem itemValue="en" itemLabel="English" />
    <f:selectItem itemValue="bg" itemLabel="Български" />
  </h:selectOneMenu>

  <h:form>C
    <h:commandLink action="#{logoutController.logout}" value="Logout"></h:commandLink>
  </h:form>
</div>