将窗口缩小时 固定导航条 的文字会被挤出外面，怎么做才能使窗口缩小时文字隐藏并出现横向滚动条？
<!doctype html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
*{
margin:0;
padding:0;
font-family:"Microsoft YaHei UI";
list-style:none;
}
.header{
height:80px;
width:100%;
background:#07cbc9;
position:fixed;
z-index:10;
}
.header .logo{
width:260px;
height:100%;
float:left;
}
.header .logo img{
width:260px;
height:80px;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:60px;
}
.header .nav ul li{
float:left;
width:95px;
color:#fff;
font-weight:bold;
font-size:15px;
text-align: center;
line-height:80px;
}
.header .nav ul li:hover{
background:#000;
cursor:pointer;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="http://img1.sycdn.imooc.com/climg//595dd5120001736902000080.png"/>
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLARY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</body>
</html>正在回答
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主页</title>
<style>
* {
margin: 0;
padding: 0;
font-size: 10px;
font-family: "Microsoft YaHei UI";
color: #fff;
}
.head {
width: 100%;
position:absolute;
top:0;
z-index:99;
height: 50px;
line-height: 50px;
background: #07cbc9;
min-width:1300px;
}
.head img {
width: 130px;
height: 24px;
margin-top: 13px;
margin-left: 50px;
float: left;
}
.head .nav ul {
float: right;
margin-right: 50px;
list-style: none;
}
.head .nav ul li {
width: 80px;
height: 50px;
float: left;
font-weight: bold;
text-align: center;
}
.head .nav ul li:hover {
background: #000;
cursor: pointer;
}
</style>
</head>
<body>
<div class="head">
<div>
<img src="images/logo.png">
</div>
<div class="nav">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>GALLERY</li>
<li>FACULTY</li>
<li>EVENTS</li>
<li>CONTACT</li>
</ul>
</div>
</div>
om 京ICP备13046642号</div>
</div>
</body>
</html>
这是我当时写作业自己写的，你看下吧
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星