为什么nav的左右不在一行上左右永远挤出来
Kinxxxxx
2019-12-16 21:57
我将我的代码放在下面，希望各位大佬能帮我看一下出了什么问题?
这是css代码：
* {
padding: 0;
margin: 0;
font-size: 12px;
}
body {
background: #f5f5f5;
}
.top {
background: url(../images/top_bg.jpg);
width: 100%;
height: 27px;
}
.top_content {
width: 1000px;
margin: 0 auto;
}
.top_content li {
float: right;
list-style-image: url(../images/li_bg.gif);
width: 70px;
line-height: 27px;
}
.top_content a:link,
.top_content a:visited {
color: #8e8e8e;
text-decoration: none;
}
.wrap {
width: 1000px;
margin: 0 auto;
}
.logo {
height: 80px;
background: #FFFFFF;
}
.logo_left {
float: left;
width: 200px;
}
.logo_right {
float: right;
width: 300px;
}
.nav {
height: 40px;
clear: both;
}
.nav_left {
width: 10px;
background: url(../images/nav_left.jpg);
border: 5px solid #090909;
float: left;
height:40px;
}
.nav_mid {
width: 980px;
background: url(../images/nav_bg.jpg);
border: 5px solid #090909;
height: 40px;
}
.nav_right {
width: 10px;
background: url(../images/nav_right.jpg);
border: 5px solid #090909;
float: right;
height:40px;
}
这是html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/setHomeSetFav.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="myside.css" />
</head>
<body>
<div class="top">
<div class="top_content">
<ul>
<li><a href="#">联系我们</a></li>
<li><a href="#" onclick="AddFavorite(window.location.document.title)">加入收藏</a></li>
<li><a href="#" onclick="SetHome(window.location)">设为首页</a></li>
</ul>
</div>
</div>
<div class="wrap">
<div class="logo">
<div class="logo_left"> <img src="../images/logo.jpg"></div>
<div class="logo_right"> <img src="../images/tel.jpg">24小时服务热线:<a href="#">123456789</a></div>
</div>
<div class="nav">
<div class="nav_left"></div>
<div class="nav_mid">
<div class="nav_mid_left">
<ul>
<li>首页</li>
<li>关于慕课</li>
<li>新闻动态</li>
<li>课程中心</li>
<li>在线课程</li>
<li>人才招聘</li>
</ul>
</div>
<div class="nav_mid_right">
<form action="" method="post">
<input type="text" />
</form>
</div>
</div>
<div class="nav_right"></div>
</div>
</div>
</body>
</html>
1回答
-
- ragerhino
- 2020-01-13 17:35:28
把 .logo 的高设置为 84px
.logo {
height: 84px;
background-color: #FFF;
}
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题