Question

我有一个相对块，我需要从中放置一个动态文本。

<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;
}

这是一个让你有所了解的小提琴。 http://jsfiddle.net/PmhM3/2/

如你所见，.text块正在崩溃。有没有解决办法让它不像这样崩溃？

Answer 1

您可以为.text class

添加此css

white-space:nowrap

Answer 2

This会对你有用。

您所要做的就是更改其显示属性。

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

以下是显示属性

之间的比较图表

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

参考：WEB

位置绝对的内联块在相对块内折叠

2 个答案: