css3怎么设置div不换行?

DIV盒子默认是换行独占100��度:DIV盒子没有赋予CSS样式时,默认DIV盒子是独占一行(宽度为100��。当设置两个div时会自动换行,我们该如何设置div不换行呢?

默认情况下div会换行:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
</head> 
<body> 
<div>第一个div</div> 
<div>第二个盒子</div> 
</body> 
</html>

效果图:

1、对div设置float使div不换行

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>无标题文档</title> 
<style> 
div{ float:left} 
</style> 
</head> 
<body> 
<div>第一个div盒子</div> 
<div>第二个div盒子</div> 
</body> 
</html>

效果图:

2、对div设置display并排样式使div不换行

通过对div设置display:inline样式让div同样失去默认100��占一行的宽度。

display:inline意思是让对象并排显示。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style> 
div{ display:inline} 
</style> 
</head> 
<body> 
<div>第一个div盒子</div> 
<div>第二个div盒子</div> 
</body> 
</html>

效果图:

以上就是css3怎么设置div不换行?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读