云计算/大数据设置line-height的时候会挤到下一个div里面，怎么处理？

<div class="article_inner clearfix">
			<div class="left fl">
				<div><a href="">推荐</a></div>
				<div><a href="">最新</a></div>
				<div><a href="">关注</a></div>
				<div><a href="">Tony Bai 说</a></div>
				<div><a href="">风间影月说</a></div>
				<div><a href="">前端开发</a></div>
				<div><a href="">后端开发</a></div>
				<div><a href="">对话ChatGPT</a></div>
				<div><a href="">移动开发</a></div>
				<div><a href="">云计算/大数据</a></div>
				<div><a href="">产品设计</a></div>
				<div><a href="">工具资源</a></div>
				<div><a href="">人工智能</a></div>
				<div><a href="">职场生活</a></div>
				<div><a href="">经验分享</a></div>
				<div><a href="">其它</a></div>
			</div>

/* 我是文章列表 */
.article_inner {
	width: 1155px;
	border: 1px red solid;
	margin: 20px auto;
}
.left {
	width: 110px;
	border: 1px red solid;
	margin-right: 25px;
	background-color: #fff;
}

.left>div {
	width: 90px;
	height: 40px;
	text-align: center;
	border: 1px red solid;
	margin-top: 10px;
	margin-left: 8px;
	line-height: 40px;
}

请问这个怎么让下面打两个红框的在div里面，并且居中显示？

weixin_慕函数5107042 2025-06-17

源自：慕慕手记前端页面布局实战 2-5 左侧菜单栏填充

收起

1回答

好帮手慕小猿 2025-06-17 13:37:22

同学，你好！同学代码不全，老师无法运行代码。同学以后可以将完整代码以及完整样式代码粘贴到问答区，方便调同学代码。

同学可能是div 宽度不够使内容下移挤到下边div里面，同学可尝试将.letf 合.left>div 宽度调大些，看能否解决同学问题

祝学习愉快~

收起回答

提问者 weixin_慕函数5107042 #1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>慕慕手记首页</title>
		<!-- 在网页创建初期会定义一下基本的样式 -->
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
	
	</head>
	<body>
		<div class="header1">
			<div class="header1_inner">
				<div class="h1_inner_left fl">
					<span><a href="">慕课网首页</a></span>
					<span>
						<a href="">免费课
						<img src="./img/1.png" alt="">
						</a>
					</span>
					<span><a href="">实战课</a></span>
					<span>
						<a href="">体系课
						<img src="./img/1.png" alt="">
						</a>
					</span>
					<div class='discover'>发现<span class="iconfont">&#xe621;</span></div>
					<div class='teamwork'>商业合作<span class="iconfont">&#xe621;</span></div>
				</div>
				<div class="h1_inner_right fr">
					<div class='search fl'>
						<div class='input_search fl'>
							<input type="text" placeholder="请输入关键字"/>
						</div>
						<div class='icon_search fl'>
							<a href=""><span class="iconfont">&#xe60d;</span>搜索</a>
						</div>
					</div>
					<div class='login fl'>
						<a href=""><span class="iconfont">&#xe6b8;</span>登录/注册</a>
					</div>
				</div>
			</div>
		</div>
		<p style="clear:both"></p>
		<div class="header2">
			<div class="header2_inner clearfix">
				<div class="h2_inner_left fl">
					<img src="img/2.png" alt="">
					<img src="img/3.png" alt="">
				</div>
				<div class="h2_inner_right fr clearfix">
					<input type="text" class='fl' placeholder="请输入你感兴趣的内容">
					<div class='h2_search_icon fl'>
						<a href=""><span class="iconfont">&#xe60d;</span></a>
					</div>
					<button class='fl'>写文章</button>
				</div>
			</div>
		</div>
		<p style="clear:both"></p>
		<div class="article_inner clearfix">
			<div class="left fl">
				<div><a href="">推荐</a></div>
				<div><a href="">最新</a></div>
				<div><a href="">关注</a></div>
				<div><a href="">Tony Bai 说</a></div>
				<div><a href="">风间影月说</a></div>
				<div><a href="">前端开发</a></div>
				<div><a href="">后端开发</a></div>
				<div><a href="">对话ChatGPT</a></div>
				<div><a href="">移动开发</a></div>
				<div><a href="">云计算/大数据</a></div>
				<div><a href="">产品设计</a></div>
				<div><a href="">工具资源</a></div>
				<div><a href="">人工智能</a></div>
				<div><a href="">职场生活</a></div>
				<div><a href="">经验分享</a></div>
				<div><a href="">其它</a></div>
			</div>
			<div class="right fl clearfix">
				<div class="hot_artical1 fl">热门文章1</div>
				<div class="hot_artical2 fl">热门文章2</div>
				<p style="clear:both"></p>
				<div class="artical_list">文章列表</div>
			</div>
		</div>
		<p style="clear:both"></p>
	</body>
</html>

/* 我是header1 */
.header1 {
	height: 65px;
	border-bottom: 1px solid #f3f5f6;
	background-color: #ffffff;
	position: sticky;
	top: 0px;
}
.header1_inner {
	width: 1155px;
	margin: 0 auto;
	height: 65px;
	line-height: 65px;`
}
.discover,
.teamwork{
	display: inline-block;
}
.h1_inner_left span {
	margin-right: 30px;
}

.h1_inner_left span a:hover {
	color: #1c1f21;
}

.h1_inner_left span:nth-child(2){
	position: relative;
	width: 65px;
	height: 30px;
	display: inline-block;
	line-height: 30px;
}

.h1_inner_left span:nth-child(4){
	position: relative;
	width: 65px;
	height: 30px;
	display: inline-block;
	line-height: 30px;
}

.h1_inner_left span img {
	position: absolute;
	top: 0px;
	right: 0px;
}

.fl {
	float: left;
}
.fr {
	float: right;
}

/* 我是右边 */
.h1_inner_right {
	width: 440px;
	height: 65px;
}
.search {
	width: 290px;
	height: 65px;
	margin-right: 25px;

}
.input_search>input {
	height: 40px;
	width: 210px;
	outline: 1px red solid;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.icon_search {
	border: 1px red solid;
	height: 42px;
	width: 78px;
	line-height: 42px;
	margin-top: 13px;
	background-color: #f01414;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.icon_search>a {
	color: #ffff;
}

.login {
	height: 65px;
	width: 123px;
	font-size: 16px;
}

.login>a>span {
	margin-right: 25px;
	font-size: 25px;
}

.login>a>span:hover {
	color: red;
}

/* 我是header2 */
.header2 {
	height: 80px;
	background-color: #ffffff;
}
.header2_inner {
	width: 1155px;
	margin: 0 auto;
	height: 80px;
	line-height: 80px;
}
.h2_inner_left img:first-child {
	height: 50px;
	width: 110px;
}

.h2_inner_left img:last-child {
	height: 20px;
	width: 110px;
	margin-bottom: -14px;
}

.h2_inner_right {
	margin-top: 25px;
	width: 425px;
}

.h2_inner_right input {
	border: 1px #dddee0 solid;
	height: 35px;
	width: 280px;
	padding: 8px 10px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
}

.h2_search_icon {
	border: 1px #dddee0 solid;
	height: 35px;
	width: 35px; 
	line-height: 35px;
	text-align: center;
	margin-right: 15px;
	background-color: #545c63;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}

.h2_search_icon>a>span{
	font-size: 20px;
	color: #fff;
}

button {
	border: 1px #dddee0 solid;
	height: 35px;
	width: 95px;
	text-align: center;
	line-height: 35px;
	background-color: #3377ff;
	border-radius: 5px;
	color: #fff;
}

button:hover {
	cursor: pointer;
}

/* 我是文章列表 */
.article_inner {
	width: 1155px;
	border: 1px red solid;
	margin: 20px auto;
}
.left {
	width: 110px;
	border: 1px red solid;
	margin-right: 25px;
	background-color: #fff;
}

.left>div {
	width: 90px;
	height: 40px;
	text-align: center;
	border: 1px red solid;
	margin-top: 10px;
	margin-left: 8px;
	line-height: 40px;
}

.right {
	width: 1018px;
	border: 1px red solid;
	background-color: #fff;
	height: 600px;

}
.hot_artical1 {
	width: 500.5px;
	border: 1px red solid;
	height: 200px;
	margin-right: 15px;
}
.hot_artical2 {
	width: 500.5px;
	border: 1px red solid;
	height: 200px;
}
.artical_list {
	margin-top: 20px;
	width: 1018px;
	border: 1px red solid;
	height: 380px;
}

全部的代码如上，有改过行高，但是不能设置line-height 居中，不然就会挤下去

2025-06-19 06:03:48

好帮手慕小猿回复提问者 weixin_慕函数5107042 #2

同学，你好！因为同学左侧字体过大内容较多致使内容超过了边框并内容下移。同学有两种修改方法：
1、修改左侧区域的字体大小，即添加如下代码
注意：为了使左右字体一致，右侧区域字体大小也需要改成font-size:13px，同学可以自己修改下
2、字体大小不变就需要改各区域的宽度，具体修改如下：

祝学习愉快~

2025-06-21 08:12:09