方法1：使用display:inline让div转换为行内元素
行内元素一般是内容的容器，一般情况下，行内元素只能包含内容或者其它行内元素，宽度和长度依据内容而定，不可以设置，可以和其它元素和平共处于一行。行内元素适合显示具体内容。
行内元素的特点：
1、和其他元素都在一行上；
2、高度、行高和顶以及底边距都不可改变；
3、宽度就是它的文字或图片的宽度，不可改变。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
display: inline;
border: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>效果图：
方法2：使用float属性让div元素脱离普通标准流的控制
浮动的元素脱离了标准文档流，摆脱块级元素和行内元素的限制。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
div {
float: left;
border: 1px solid red;
}
</style>
<title></title>
</head>
<body>
<div>第一个div</div>
<div>第二个div</div>
</body>
</html>效果图：
方法3：通过flex方式实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#container {
width: 400px;
height: 200px;
display: flex;
display: -webkit-flex;
/* 从左端开始沿水平轴防止flex item */
flex-direction: row;
/* 强制 flex item不换行，沿着同一行堆叠 */
flex-wrap: nowrap;
/* flex item在主轴上的对齐方式，这里定义左对齐 */
justify-content: flex-start;
/* 定义交叉轴对其方式 */
align-items: flex-start
}
.lable {
width: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<div class="lable">第一个div</div>
<div class="lable">第二个div</div>
<div class="lable">第三个div</div>
<div class="lable">第四个div</div>
<div class="lable">第五个div</div>
</div>
</body>
</html>效果图：
更多CSS相关知识，可访问 CSS教程 ！
以上就是css如何让div不换行？的详细内容，更多请关注0133技术站其它相关文章！
