Question

我有两个部分的文字，一个标题和一个值（如果我得到那么多，将通过javascript更新！），例如Temp Max和20.0，并且这一行有四行高于另一个，I我希望所有的数字都能垂直排列，我觉得很容易，但我不能让它起作用。

我在html和css以及更多内容中尝试了text-align，align：right。

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

HTML：

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

CSS：

h2  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline}
h3  { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; display:inline; color:#366}


.ex2
{
width:320px;
height:120px;
padding-top:2px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
border:1px;
border-color:#FF4C4C;
border-style:dashed;
margin:2px;
overflow: hidden;
float: left;
}

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

jsfiddle

Answer 1

{@ 1}}属性已弃用（因此不应再使用），并且从不首先应用于align元素。

span CSS属性将使应用它的块元素的内联内容居中（因此您需要将其应用于text-align而不是{ {1}}）。

注意：您的温度不是标题，因此不应将其标记为h3。 span会更合适。

就此而言，您的数据可能会更好地标记为：

h3

Answer 2

如果您使用.ex4设置text-align: right样式，则应该有效。

http://jsfiddle.net/2S39K/

Answer 3

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

和关于文字对齐只需将text-align: right;添加到.ex4

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

为什么我的文字不对齐？

3 个答案: