0

我不确定如何描述这一点：当出现滚动条并且由于溢出而向右滚动时，我的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;  
}  
}

任何见解都值得赞赏。

4

3 回答 3

1

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

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

于 2013-07-06T05:26:42.100 回答
1

是的，这很烦人。

将宽度设置为 100% 的问题是缩放或不同的屏幕尺寸可能会根据其他 css 规则以不同方式呈现它。

您应该将 a 设置min-width为您期望的通常宽度。

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

所以添加min-width:900px到您的 nav {} 样式规则。或您使用的任何宽度。

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;
}
于 2013-07-06T05:32:10.820 回答
0

找到您的nav acss 样式并替换此 css 并完成。

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

老的

nav a {  
  color: #fff;  
  display: inline-block;  
  width: 150px;  
  text-align: center;  
  text-decoration: none;  
  line-height: 40px;  
  text-shadow: 1px 1px 0px #283744;  
}
于 2013-07-06T05:59:54.397 回答