爲什麼我的文字不能正確對齊？

我有兩個部分的文本，一個標題和一個值（如果我得到那麼多，將通過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

爲什麼我的文字不能正確對齊？

回答

相關問題