DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100��。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div{ border: 1px solid red; } </style> <title>div实例</title> </head> <body> <div>第一个div</div> <div>第二个盒子</div> </body> </html>
效果如下:
css使div不换行的方法:
一、对div设置float浮动样式
对div设置float:left样式相当于是让div对象靠左,自然失去了本身宽度样式。
让DIV+CSS实现DIV并排不换行实例代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div{ float:left; border: 1px solid red; } </style> <title>div实例</title> </head> <body> <div>第一个div</div> <div>第二个盒子</div> </body> </html>
效果如下:
二、对div设置display并排样式
通过对div设置display:inline样式让div同样失去默认100��占一行的宽度。
display:inline意思是让对象并排显示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> div{ display:inline; border: 1px solid red; } </style> <title>div实例</title> </head> <body> <div>第一个div</div> <div>第二个盒子</div> </body> </html>
效果如下:
推荐:css3手册
以上就是css3如何使div不换行?的详细内容,更多请关注易知道|edz.cc其它相关文章!