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

html-css027

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

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

<div style="width:100%height:50pxwhite-space:nowrapoverflow:auto">

    <div style="display: inline-blockwidth:25%">1</div>

    <div style="display: inline-blockwidth:25%">2</div>

    <div style="display: inline-blockwidth:25%">3</div>

    <div style="display: inline-blockwidth:25%">4</div>

    <div style="display: inline-blockwidth:25%">5</div>

</div>

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

*display: inline

*zoom: 1

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

关于css让元素换行限制如下：

1强制不换行 div{ white-space:nowrap}

2自动换行 div{ word-wrap: break-wordword-break: normal}

3强制英文单词断行 div{ word-break:break-all}

#zzha{width:50pxheight:600pxpadding:6pxfont-size:12pxmargin:auto}

#zzha a{background:#663399 left 0color:#ffftext-decoration:noneheight:60pxfloat:leftcursor:pointermargin:0 5px 8px 0}

#zzha a:hover{background:#00CC66 left -30pxheight:30px}

#zzha a span{background:#333399 right 0padding:7px 8px 7px 0margin:0 0 0 8pxfloat:leftheight:40px}

#zzha a:hover span{background:#FF0000 right -30pxcolor:#000padding:7px 8px 7px 0margin:0 0 0 8pxheight:16px}

<div id="zzha">

<div class="aa"><a href="#"><span>台湾馆</span></a></div>

<div class="aa"><a href="#"><span>数码</span></a></div>

<div class="aa"><a href="#"><span>综合111111111</span></a></div>

</div>

楼主设置了浮动，div肯定会并排显示，如果想让他换行就要让他外面的宽度不够，他就会自动换行，楼主可以在外面在设置一个div把它的宽度设置小一点