新

Question

我不确定如何描述这个：当出现滚动条并且由于溢出而向右滚动时，我的nav标记会调整为较短的字段。无论如何，图片更好：

Without Scrollbar

With Scrollbar

在第二张图片中，显然该字段的长度已缩短。我不确定为什么会这样。这是我的代码：

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

感谢任何见解。

Answer 1

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

编辑：奇怪的修复：将导航中的width: 100%更改为min-width: 100%。那（以及nav是块元素的事实）是限制宽度的。为了确保它向右流动，请将display: inline-block放在其位置。

Answer 2

是的，这很烦人。

将宽度设置为100％的问题是，缩放或不同的屏幕尺寸可以根据其他css规则对其进行不同的渲染。

你应该将min-width设置为你想要的通常宽度。

对我而言，min-width:960px通常可以解决这个问题，但看起来你使用的是900px值。

所以将min-width:900px添加到您的导航{}样式规则中。或者你使用的任何宽度。

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;
  min-width:900px;
}

Answer 3

找到你的nav a css样式并替换此css并完成。

DEMO http://jsfiddle.net/bC63a/

新

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

OLD

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

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

3 个答案:

新

OLD