Question

div如何使内容强制不换行,用CSS实现!

宽100%高50px的div嵌套了5个宽25%高50px左浮动的div，所以里面的5个的总宽度大于了外面，导致第5个div换行了！代码如下：

但这不是我想要的效果，我想要的是：里面的5个div并列且外面的div只出现横向的滚动条，不出现纵向的滚动条！

Answer 1

你好，不使用浮动，使用inline-block就可以处理了：

<div style="width:100%;height:50px;white-space:nowrap;overflow:auto;">
    <div style="display: inline-block;width:25%;">1</div>
    <div style="display: inline-block;width:25%;">2</div>
    <div style="display: inline-block;width:25%;">3</div>
    <div style="display: inline-block;width:25%;">4</div>
    <div style="display: inline-block;width:25%;">5</div>
</div>

如果要考虑IE6/7，display:inline-block的元素需加上：

*display: inline;
*zoom: 1;

希望是你想要的结果，望采纳~~

追问

display: inline-block;为什么会出现间距了？