滚动条永久确定我的导航标签的大小

debugcn 发表于 Dev

玛格玛

我不确定如何用其他方式来描述：当出现滚动条并且由于溢出而向右滚动时，nav标签的大小将调整为较短的字段。无论如何，图片更好：

没有滚动条

使用滚动条

在第二张图像中，很明显，视场的长度已缩短。我不确定为什么会这样。这是我的代码：

<link rel="stylesheet" type="text/css" href="../CSS/Style2.css"/>

<body>
  <script type="text/javascript" src="../JS/jquery.js"></script>
  <script type="text/javascript" src="../JS/respond.min.js"></script>
  <script src="../JS/jquery.min.js"></script>
  <script type="text/javascript" src="../JS/menu_dropdown.js"></script>

  <nav class="clearfix">  
    <ul class="clearfix">  
    <li><a href="#">Home</a></li>  
    <li><a href="#">Territory</a></li>  
    <li><a href="#">Publishers</a></li>  
    <li><a href="#">Special Campaign</a></li>  
    <li><a href="#">Management</a></li>  
    <li><a href="#">About</a></li>    
</ul>  
<a href="#" id="pull">Menu</a>

的CSS：

@charset "utf-8";
/* CSS Document */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  height: 100%;
  background: url(../Images/bg.jpg)
}

body {
  height: 100%;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
}

nav {  
  height: 40px;  
  width: 100%;  
  background: #455868;  
  font-size: 11pt;  
  font-family: 'PT Sans', Arial, sans-serif;  
  font-weight: bold;  
  position: relative;  
  border-bottom: 2px solid #283744;  
}  
nav ul {  
  padding: 0;  
  margin: 0 auto;  
  width: 900px;  
  height: 40px;  
}  

nav li {  
  display: inline;  
  float: left;  
}  

.clearfix:before,  
.clearfix:after {  
  content: " ";  
  display: table;  
}  
.clearfix:after {  
  clear: both;  
}  
.clearfix {  
  *zoom: 1;  
}  

nav a {  
  color: #fff;  
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}  

nav li a {  
  border-right: 1px solid #576979;  
  box-sizing:border-box;  
  -moz-box-sizing:border-box;  
  -webkit-box-sizing:border-box;  
}  
nav li:last-child a {  
  border-right: 0;  
}  

nav a:hover, nav a:active {  
  background-color: #8c99a4;  
}  

nav a#pull {  
  display: none;  
}  

@media screen and (max-width: 600px) {  
nav {   
    height: auto;  
}  
nav ul {  
    width: 100%;  
    display: block;  
    height: auto;  
}  
nav li {  
    width: 50%;  
    float: left;  
    position: relative;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
    border-right: 1px solid #576979;  
}  
nav a {  
    text-align: left;  
    width: 100%;  
    text-indent: 25px;  
}  
}  

@media only screen and (max-width : 480px) {  
nav {  
    border-bottom: 0;  
}  
nav ul {  
    display: none;  
    height: auto;  
}  
   nav a#pull {
    display: block;
    background-color: #283744;
    width: 100%;
    position: relative;
}
nav a#pull:after {
    content:"";
    background: url(../Images/nav-icon.png) no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
    position: absolute;
    right: 15px;
    top: 10px;
} 
}  

@media only screen and (max-width : 320px) {  
nav li {  
    display: block;  
    float: none;  
    width: 100%;  
}  
nav li a {  
    border-bottom: 1px solid #576979;  
}  
}

任何见解均表示赞赏。

uber5001

您的导航宽度为100％！它只会是身体的100％宽度。如果向右滚动，则导航不会变大。文本刚刚溢出。我建议将每个导航项的背景设置为纯色。

编辑：奇怪的解决方法：将您width: 100%的资产从nav更改为min-width: 100%。那（和nav是一个块元素的事实）是限制宽度的原因。为了确保它向右流动，请放置display: inline-block在原处。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。