CSS無法在Div內對齊文本

Question

我在空間上換行了。 我不知道為什么會這樣

請檢查下面的代碼

<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/

Answer 1

您為sub_area_texttime div設置了40px的寬度和90px的右填充。 增加寬度或減少填充。 它包裝線是因為容器太小。

Answer 2

試試這個white-space:nowrap; 在您的#sub_area_texttime 。