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

我有两个部分的文本，一个标题和一个值（如果我得到那么多，将通过javascript进行更新！），如Temp Max和20.0，这一个上面有四行，我会像所有的数字垂直排列，容易我想，但我不能得到它的工作。为什么我的文字不能正确对齐？

我已经尝试了文本对齐，对齐：在HTML和CSS中加上更多。

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

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

来源

2013-12-11 Simon_A

为表格数据使用表格。 – Hardy

.ex4 {text-align：right; }？ – Gotschi

它正确对齐，但是'span'没有足够的宽度供您注意。用chrome开发工具检查它的宽度。浮动'H2'左边，向右浮动'H3'，并在每个'H2/H3'设置后清除。 –

的align属性已被弃用（因此不应使用任何以上），并从未应用于span元件在第一位置。

应用它的text-align CSS属性将居中块元素的在线内容（所以你需要将它应用到h3而不是span）。

注意：你的温度都没有标题，所以他们不应该被标记为h3。 A 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>

来源

2013-12-11 00:48:12 Quentin

谢谢，这是它！我确信我已经尝试过了。 –

它应该工作，如果你的风格.ex4与text-align: right。

http://jsfiddle.net/2S39K/

来源

2013-12-11 00:47:23 AVP

你有无效的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

来源

2013-12-11 00:49:17 mdesdev

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

回答

相关问题