css 如何使标 checkout 现在同一行并向右浮动

yeotifhr 于 2023-04-08 发布在其他

关注(0)|答案(3)|浏览(132)

当前发生的情况：

<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>

使用上面的代码，元素看起来像这样：

将float: right;添加到G-sense标签使其看起来像这样（不起作用）：

**我想做的是：**使G-sense标签、字段和单位与频率元素相同，但G-sense元素必须在右侧。
**如何将它们移到右边？**谢谢

css

来源：https://stackoverflow.com/questions/75923166/how-to-make-a-label-appear-on-the-same-line-and-floated-to-the-right

3条答案

按热度按时间

7xllpg7q1#

将div设为position: relative，然后<label>的样式应该是position:absolute和right: 0，也可能是top: 0

赞(0）回复(0）举报 2023-04-08

ecr0jaav2#

通过将截面转换为网格并使用该网格代替float来解决

<div id="osc_params" title="Oscillator Parameters">
    <div id="title_osc_param">
        <h3 style="margin-bottom:0px">Oscillator Parameters:</h3>
    </div>
    <div id="osc_freq_grid">
        <label for="oscFreq" id="osc_freq_label">Frequency: </label>
        <input class="field" id="oscFreq">
        <p id="osc_freq_units" class="units">MHz</p>
    </div>
    <div style="grid-column: 2; grid-row: 2"><!--Empty Div for layout--></div>
    <div id="gsense_grid">
        <label for="gSense" id="gsense_label">G-Sense: </label>
        <p id="gsense_units" class="units">MHz</p>
        <input class="field" id="gSense">
    </div>
</div>

赞(0）回复(0）举报 2023-04-08

mpbci0fu3#

如果标签具有语义含义，可以将其 Package 在p中并输入：Why does the W3C advise wrapping input elements in tags?

<div title="Oscillator Parameters">
  <h3 style="margin-bottom: 0px">Oscillator Parameters:</h3>
  <p style="display: inline; float: left">
      <label for="gSense" style="display: block">Frequency: </label>
      <input class="field" id="oscFreq" value="10" style="float:left; 
       width: 4em; margin-right:2px; display: block; clear: left">Mhz
  </p>
  <p style="display: inline; float: right">
      <label for="gSense" style="display: block">G-Sense: </label>
      <input class="field" id="gSense" value="10" style="width: 4em; 
       margin-right: 2px" />Mhz
  </p>
</div>

赞(0）回复(0）举报 2023-04-08

我来回答

css 如何使标 checkout 现在同一行并向右浮动

3条答案

相关问题

热门标签

最新问答