Inline block with position absolute is collapsing inside relative block

Question

I have an relative block and I need to put an dynamic text right from it.

<div class='wrap'>
<div class='text'>This text...</div>
</div>

.wrap{
width: 300px;
height: 20px;
background-color: #e3e3e3;
position: relative;
margin-bottom: 60px
}

.text{
background: #27818d;
color: #fff;
display: inline;
position: absolute;
left: 312px;
}

Here is a fiddle for you to get an idea. http://jsfiddle.net/PmhM3/2/

As can you see, the .text block is collapsing. Is there a solution to keep it from collapsing like this?

Answer 1

您可以为.text类添加此CSS

white-space:nowrap

Answer 2

This will work for you.

all you have to do is change its display property.

.text{
background: #27818d;
color: #fff;
display: table;
position: absolute;
left: 312px;
}

Below is the chart to compare among display properties

inline         Default. Displays an element as an inline element (like <span>)  
block          Displays an element as a block element (like <p>)
inline-block       Displays an element as an inline-level block container. The inside           
                   of this block is formatted as block-level box, and the element  
                   itself is formatted as an inline-level box   
inline-table       The element is displayed as an inline-level table     
list-item          Let the element behave like a <li> element.
run-in         Displays an element as either block or inline, depending on context   
table          Let the element behave like a <table> element    
table-caption   Let the element behave like a <caption> element 
table-column-group  Let the element behave like a <colgroup> element    
table-header-group  Let the element behave like a <thead> element   
table-footer-group  Let the element behave like a <tfoot> element   
table-row-group Let the element behave like a <tbody> element   
table-cell          Let the element behave like a <td> element  
table-column    Let the element behave like a <col> element 
table-row           Let the element behave like a <tr> element  
none            The element will not be displayed at all (has no effect on layout)  
inherit         The value of the display property will be inherited from the parent 
                    element

Reference: WEB