所以，我加了一个overflow-x: hidden;这样水平滚动条就不会显示，现在它会影响我菜单栏上的边框，菜单栏的右侧没有显示它的边框，当我从 CSS 中取出 overflow-x 代码时，边框又回来了有什么方法可以隐藏滚动条并获得边框的右侧以表示感谢!
CSS:
*{
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
h1{
font:bold 16px tahoma;
}
}
header,section,footer,aside,nav,article,hgroup{
display: block;
}
body{
width: 100%;
display:-webkit-box;
-webkit-box-pack: center;
}
section{
font: 12px Verdana;
}
#big_wrapper{
max-width: 1000px;
margin: 20px 0px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#top_header{
background: transparent;
padding: 5px;
text-align: center;
}
#top_menu{
float: left;
border: 1px solid black;
background:-webkit-linear-gradient(left, #BDBDBD, #E6E6E6, #BDBDBD);
width: 1000px;
text-align: center;
}
#top_menu li{
display: inline-block;
list-style: none;
padding: 5px 20px;
font: bold 14px tahoma;
}
HTML:
<body>
<div id="big_wrapper">
<header id="top_header">
<img src="iadt.jpg" height="100" width="300"> </img>
</header>
<center><nav id="top_menu">
<ul>
<li><a href="Iamdrivingtoday.com/Home">Home</a></li>
<li><a href="Iamdrivingtoday.com/Application">Application</a></li>
<li><a href="Iamdrivingtoday.com/Privacy Policy">Privacy Policy</a></li>
<li><a href="Iamdrivingtoday.com/ContactUs">Contact Us</a></li>
</ul>
</nav> </center>
最佳答案
我相信这是因为您的#big_wrapper 的宽度等于#top_menu 的宽度，即1000px。请记住，当您在 #top_menu 中定义 border: 1px solid black; 时，它会在您的 #top_menu 的每一侧添加 1 个像素。简单地说，您的 #top_menu 的宽度现在是 1002px。要克服该问题，您有以下 2 个选择:
- 将
#top_menu的宽度减小到998px; - 将
box-sizing: border-box;添加到您的#top_menu
关于jquery - 有人能告诉我为什么我的 overflow-x 会影响我的菜单边框吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24977559/