html - 一个 div 中有两个标签，但不在同一行

Question

我的代码是这样的:

    <div data-role="content" class="ui-content" id="jobModuleContent">
        <div id="jmc_cJobNr"></div>
    </div>

在 id 为 jmc_cJobNr 的 div 中应该有两个 <label> s，一个在左边，另一个在右边。我认为解决方案可能是使用 style="text-align:left/right" 处理元素.它有效，但不是它应该的方式，因为一个标签在 div 中占据一整行，另一个标签在下面一行。

有什么解决办法吗？

Answer 1

您可以像这样 float 每个 div。

.label {
   float: left;
   width: 50%;
}

.label--right {
    text-align: right;
}

<div data-role="content" class="ui-content" id="jobModuleContent">
    <div id="jmc_cJobNr">
        <div class="label">Label one</div>
        <div class="label label--right">Label two</div>
    </div>
</div>

You can see in this fiddle