javascript - float :right using css - There must be an easy way to do this

Question

我有一些文本，我想在其后显示一个“V”并向右浮动。文本是电压(因此是 V)。它有一个 id 并使用 JavaScript 计算。

我敢肯定有一种巧妙的方法可以做到这一点，但我没有经验并且使事情过于复杂而且没有任何进展!

我试过这个:

<h3><span id="voltsSensor2"; style="float:right" >2.99</span>V</h3>

但是因为 V 在跨度之外，所以它保持在左侧。

我也曾尝试让 h3 标签全部 float 在 css 中，但出于某种原因，它会将文本放在 div 区域之外，该区域是一个带有边框的框，如本例所示:

<div class="ex">
    <h1 id = nameS1>Sensor 2</h1>
    <h2>Temperature</h2>
    <h3><span id="tempSensor2">18.5</span>&#176C</h3>

    <div style="width:255px; height:13px; background-color:#ddd;">
        <div id ="barTempS2" style="width:60px; height:13px; background-color:#366; border-right:1px white solid;"></div>
    </div>

    <h2>Humidity</h2>
    <h3><span id="humSensor2">55.0</span>%RH</h3>

    <div style="width:255px; height:13px; background-color:#ddd;">
        <div id ="barHumS2" style="width:140px; height:13px; background-color:#366"></div>
    </div>

    <h4><span id="voltsSensor1">2.99</span>V</h4>
    <img src="images/greyCornerRhb.png" width="12" height="12" alt="Sensor Name"; style="float:right">
</div>

我相信有更简单的方法。如果能提供一些帮助，我将不胜感激。

Answer 1

您应该只在父元素上使用 text-align: right; 并去掉 float。