CSS无法在Div内对齐文本

Question

I am getting a line break on space. I don't why it is happening

Please check below code

<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

You gave the sub_area_texttime div a width of 40px and a padding-right of 90px. Increase width or decrease the padding. It's wrapping the line because the container is too small.

Answer 2

Try this white-space:nowrap; in your #sub_area_texttime .