如何让G-Sense标签与输入框、单位同排并整体右对齐

当前代码 #

<div title="Oscillator Parameters">
    <h3 style="margin-bottom:0px">Oscillator Parameters:</h3>

    <label for="oscFreq" style="float:left; display: inline;">Frequency: </label>
    <input class="field" id="oscFreq" value="10" style="float:left; width: 4em; margin-right:2px; display: block; clear: left">
    <p style="display: inline; float: left; margin-top: 0px" class="units">MHz</p>

    <label for="gSense" style="display: inline;clear: none;">G-Sense: </label>
    <p style="float: right; margin-bottom: 0px; clear: right;margin-top: 0px;" class="units">MHz</p>
    <input class="field" id="gSense" value="10" style="float:right; width: 4em; margin-right: 2px; display: block;">
                
</div>

显示效果说明 #

• 初始效果：Frequency的标签、输入框、单位按「标签-输入框-单位」顺序左对齐排列；G-Sense标签在左侧，输入框和单位右对齐，两组布局完全不一致。
• 异常效果：给G-Sense标签添加float: right;后，标签会跑到输入框和单位的右侧，变成「单位-输入框-标签」的反向排列，完全不符合预期。

需求 #

让G-Sense的标签、输入框、单位保持和Frequency一致的「标签-输入框-单位」排列顺序，同时整个G-Sense组整体右对齐显示。

解决方案 #

方法1：容器包裹+浮动布局 #

把G-Sense的三个元素放进一个独立容器，给容器设置右浮动，容器内部元素统一左浮动，以此保持和Frequency组一致的排列顺序：

<div title="Oscillator Parameters">
    <h3 style="margin-bottom:0px">Oscillator Parameters:</h3>

    <!-- Frequency组 -->
    <label for="oscFreq" style="float:left; display: inline;">Frequency: </label>
    <input class="field" id="oscFreq" value="10" style="float:left; width: 4em; margin-right:2px; display: block;">
    <p style="display: inline; float: left; margin-top: 0px" class="units">MHz</p>

    <!-- G-Sense组：容器右浮动，内部元素左浮动 -->
    <div style="float: right;">
        <label for="gSense" style="float:left; display: inline;">G-Sense: </label>
        <input class="field" id="gSense" value="10" style="float:left; width: 4em; margin-right:2px; display: block;">
        <p style="display: inline; float: left; margin-top: 0px" class="units">MHz</p>
    </div>
                
    <!-- 清除浮动，避免影响后续元素布局 -->
    <div style="clear: both;"></div>
</div>

方法2：Flex布局（更推荐） #

用Flex布局替代浮动，代码更简洁，还能自动实现元素垂直对齐，无需处理浮动清除问题：

<div title="Oscillator Parameters" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;">
    <h3 style="margin-bottom:0px; width: 100%;">Oscillator Parameters:</h3>

    <!-- Frequency组 -->
    <div style="display: flex; align-items: center;">
        <label for="oscFreq">Frequency: </label>
        <input class="field" id="oscFreq" value="10" style="width: 4em; margin: 0 2px;">
        <p style="margin: 0;" class="units">MHz</p>
    </div>

    <!-- G-Sense组 -->
    <div style="display: flex; align-items: center;">
        <label for="gSense">G-Sense: </label>
        <input class="field" id="gSense" value="10" style="width: 4em; margin: 0 2px;">
        <p style="margin: 0;" class="units">MHz</p>
    </div>
</div>

说明：Flex布局是更现代的布局方案，能自适应不同屏幕宽度，避免浮动布局可能带来的兼容性和布局混乱问题。

内容的提问来源于stack exchange，提问作者mrblue6