将窗口缩小时固定导航条的文字会被挤出外面，怎么做才能使窗口缩小时文字隐藏并出现横向滚动条？

<!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>

我是北方栖姬 2018-02-27

源自：项目：网页布局案例 2-10 作业题

收起

6回答

一路电光带火花回答被采纳获得+3积分 2018-02-27 15:43:59

<!DOCTYPE html>

<html>

<head>

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

</div>

<ul>

<li>ABOUT</li>

<li>GALLERY</li>

<li>FACULTY</li>

<li>EVENTS</li>

<li>CONTACT</li>

</ul>

</div>

om 京ICP备13046642号</div>

</div>

</body>

</html>

这是我当时写作业自己写的，你看下吧

收起回答

我是北方栖姬提问者 #1

看了一下，我知道了，导航栏我没有设置最小宽度（min-width），所以才会导致文字被挤压，谢谢你啦

2018-02-27 15:51:13

一路电光带火花 2018-02-27 16:09:06

不客气呀，你下次再提问问题，可以描述的清楚一些，或者将有问题的页面截图上来，这样会更清晰，效率会更高~这是我作为一个老学习者的建议哦~

收起回答

提问者我是北方栖姬 2018-02-27 15:37:05

这是全屏窗口下的导航栏（看起来挺正常）：

窗口缩小时的导航栏（此时可以知道导航栏的文字被挤出窗口）：

我想要的效果是类似这样的：（导航栏文字随着窗口缩小而被隐藏）

收起回答

一路电光带火花 2018-02-27 13:56:24

我测试你的代码，效果是这样的，不知道你说的被挤压下去是什么样子的

收起回答

提问者我是北方栖姬 #1

看下评论，我截了图

2018-02-27 15:37:46
提问者我是北方栖姬 #2

那个导航栏文字颜色改成黑色的话就很明显了

2018-02-27 15:38:46

一路电光带火花 2018-02-27 11:37:48

这个要实现的话，得使用JS脚本了，通过判断浏览器的宽度来为头部的宽度进行赋值，你先学好当前的内容吧。而且作业也没有要求去实现页面窗口缩小顶部就得跟着缩小这个效果。

收起回答

提问者我是北方栖姬 #1

不需要让元素随着窗口缩小而跟着缩小啊，我只需要窗口缩小时的一瞬间会出现横向滚动条并且多出的的元素部分被切掉而不是被挤压都下面去

2018-02-27 12:38:43

小丸子爱吃菜 2018-02-27 10:11:46

如果元素设置了固定定位，那么它是不会随着浏览器窗口的变化而变化的，当页面缩小时，多余的部分就会被切掉。

当前我们先不考虑页面手动缩小时，固定元素的变化，如果有兴趣，可以查阅一下如何去实现。

祝学习愉快！

收起回答

提问者我是北方栖姬 #1

那要怎么设置呢？能帮忙在我的代码基础上修改一下吗？实现窗口页面缩小时导航栏的文字多余部分被切掉而不是被挤出导航栏

2018-02-27 11:24:50
提问者我是北方栖姬 #2

没事了，问题解决了，不用在意

2018-02-27 15:52:21
qq_at_13 回复提问者我是北方栖姬 #3

header设置min-width

2018-03-06 13:07:14