html - 如何对齐 HTML 表格中的两个组件？

Question

我需要 programVersion 和 userInfo 在同一行。我该怎么做？

它目前的样子：

我尝试将它们添加到另一个表中。

<table id="sheet" width="100%" border="0">
  <tr>
    <td rowspan="5" width="30px"></td>
    <td colspan="2">&nbsp;</td>
  </tr>
  <tr id="headerrow">
    <td rowspan="2" id="headerrow" width="300" style="border-radius: 10px 0px 0px 0px;">
      <p:graphicImage url="/images/six_logo.png" />
    </td>
  </tr>
  <tr>
    <td id="app-header" style="border-radius: 0px 10px 0px 0px;">
      <ui:insert name="header">
        <strong style="font-size: 30px">#{i18n['application.name']}</strong>
      </ui:insert>

      <ui:insert name="programVersion">
        <p>#{pv['ProgramVersion']}</p>
      </ui:insert>

      <ui:insert name="userInfo">
        <div align="right">
          <h:outputText value="#{loginController.userInfo}" />
        </div>
      </ui:insert>
    </td>
  </tr>
</table>

标签： htmlcss

Answer 1

我不知道您用于显示数据的脚本，但我认为以下可能对您有用。

div:first-child {
  display: inline;
}

.first{
  float: left;
}

.second{
  float: right;
}

<div>

  <div class="first">
    0.20.r5 Version
  </div>
  <div class="second">
    dewrf435dsfs345f65
  </div>

</div>