2014-01-24 129 views
1

我在空間中出現換行符。我不知道爲什麼它正在發生CSS未對齊Div內的文本

請檢查下面的代碼

<div id="postcode_phone"> 
    <div id="sub_area_text1">02036MMM4</div> 
    <div id="sub_area_textgmt">GMT +1</div> 
    <div id="sub_area_texttime">Mon-Fri 8:00am - 5:00pm<br>Sat: 8:00am - 1:00pm </div> 
</div> 

CSS

#postcode_phone{ 
    position:relative; 
    background:url(images/phonebanner.png) no-repeat; 
    width:222px; 
    height:81px; 
} 

#sub_area_text1 { 
    font-size:1.2em; 
    font-family: 'Corbol'; 
    color:#31ACFF; 
    text-align:center; 
    padding-top:10px; 
    padding-left:30px; 
} 

#sub_area_textgmt { 
    font-size:0.8em; 
    font-family: 'Corbol'; 
    color:#999999; 
    text-align:right; 
    padding-top:10px; 
    padding-right:60px; 
    width:10px; 
    border:5px solid gray; 
    margin:0px; 
    float:left; 
} 

#sub_area_texttime { 
    font-size:0.8em; 
    font-family: 'Corbol'; 
    color:#999999; 
    text-align:center; 
    padding-right:90px; 
    width:40px; 
    border:5px solid gray; 
    margin:0px; 
    float:right; 
    overflow: hidden; 
} 

http://jsfiddle.net/d5Z6V/31/

+0

哪裏是換行符?在日期/時間信息? – jmore009

+1

想知道:寬度限制的任何理由加上'#sub_area_texttime'和'#sub_area_textgmt' divs上的大量填充? – godfrzero

+0

http://jsfiddle.net/d5Z6V/34/ – Franck

回答

0

#sub_area_texttime試試這個white-space:nowrap;

+0

是的,謝謝denisazevendo –

+1

像這樣:http://jsfiddle.net/d5Z6V/32/ – Scott

+0

in #sub_area_textgmt我是文本對齊:正確;但它沒有發生...... –

1

您給了sub_area_texttime div 40px的寬度和90px的填充右邊。增加寬度或減少填充。它正在包裝線,因爲容器太小。

+0

這是正確的方法。不要忘了添加'padding'你刪除回''寬度http://jsfiddle.net/cg3ST/1/ – zgood

+0

@SyntaxLAMP我得到了文本對齊:正確;在sub_area_textgmt但它沒有對齊到正確的,你可以檢查jsfiddle –

+0

它沒有正確對齊,因爲你需要降低填充和或增加寬度。使填充10px和寬度180px,你會看到它的工作。 – SyntaxLAMP