Html 为什么我的文本不能正确对齐？

我有一些分为两部分的文本，一个标题和一个值（如果我有那么多的话，将通过javascript更新！），比如Temp Max和20.0，其中一行在另一行之上有四行，我希望所有的数字垂直排列，我想这很容易，但我就是无法让它工作

我尝试了文本对齐，对齐：在html和css中都是正确的

我做错了什么？（我觉得这将是一个愚蠢的错误，所以提前道歉！）

HTML:

---

如果您使用

文本对齐：右

设置

.ex4

的样式，它应该可以工作

---

不推荐使用

align

属性（因此不应再使用该属性），并且从一开始就不会应用于

span

元素

text align

CSS属性将其应用到的块元素的内联内容居中（因此需要将其应用到

h3

而不是

span

）

---

注意：您的温度不是标题，因此不应标记为

h3

。

div

更合适

---

因此，您的数据最好标记为：

<table>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Temperature">Temp</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Humidity">Hum</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
</table>

临时雇员
马克斯
0
分钟
0
哼
马克斯
0
分钟
0

您的HTML无效

<div class="ex2">
  <div class="ex4">
    <h2>Temp Max</h2> <h3><span id="maxTemp1">0.00</span></h3><br>
    <h2>Temp Min</h2> <h3><span id="maxTemp2">0.00</span></h3><br>
    <h2>Hum Max</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
    <h2>Hum Min</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
  </div>
</div>

---

将表格用于表格数据。.ex4{text align:right；}？它正在正确对齐，但是

span

没有足够的宽度让您注意到。使用chrome开发工具检查其宽度。将

H2

向左浮动，将

H3

向右浮动，并在每次

H2/H3

设置后清除。为什么在H3中有span？

<table>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Temperature">Temp</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row" rowspan="2"><abbr title="Humidity">Hum</abbr></th>
        <th scope="row"><abbr title="Maximum">Max</abbr></th>
        <td>0.00</td>
    </tr>
    <tr>
        <th scope="row"><abbr title="Minimum">Min</abbr></th>
        <td>0.00</td>
    </tr>
</table>

<div class="ex2">
  <div class="ex4">
    <h2>Temp Max</h2> <h3><span id="maxTemp1">0.00</span></h3><br>
    <h2>Temp Min</h2> <h3><span id="maxTemp2">0.00</span></h3><br>
    <h2>Hum Max</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
    <h2>Hum Min</h2> <h3><span id="maxTemp3">0.00</span></h3><br>
  </div>
</div>

.ex4 {
 border:1px;
 border-style:dashed;
 border-color:#FF4C4C;
 text-align: right;
 width:200px;
 height:110px;
 float: right;
 display:inline;
}