问答详情
源自:3-4 企业网站制作之导航部分制作(一)

为什么nav的左右不在一行上左右永远挤出来

我将我的代码放在下面,希望各位大佬能帮我看一下出了什么问题?

这是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>


提问者:Kinxxxxx 2019-12-16 21:57

个回答

  • ragerhino
    2020-01-13 17:35:28

    把 .logo 的高设置为 84px


    .logo {

        height: 84px;

        background-color: #FFF;

    }