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不换行？的详细内容，更多请关注0133技术站其它相关文章！
