有人可以告诉我为什么我的overflow-x影响了我的菜单边框吗? [英] can someone tell me why my overflow-x is effecting my menu border?
问题描述
因此，我添加了一个溢出-x:隐藏；这样就不会显示水平滚动条，并且现在它正在影响菜单栏上的边框.菜单栏的右侧不显示边框，当我从CSS中取出溢出X代码时，边框又回来了有什么方法可以使滚动条保持隐藏状态，并获得边框的右侧以表示感谢！
So, I added an overflow-x: hidden; so that the horizontal scrollbar won't show and now it's affecting the border I have on my menu bar the right side of the menu bar is not showing its border and when I take the overflow-x code out of CSS the border comes back is there any way to keep the scroll bar hidden and get the right side of the border to show thanks!
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.要解决该问题，您可以选择以下两种选择:
I believe it's because your #big_wrapper's width equals #top_menu's width which is 1000px. Remember that when you define border: 1px solid black; in your #top_menu then it will add 1 pixel on every side of your #top_menu. Simply saying that your #top_menu's width is now 1002px. To overcome that problem you have 2 choices below:
- 将
#top_menu的宽度减小为998px; - 将
box-sizing: border-box;添加到您的#top_menu
- Decrease the
#top_menu's width into998px; - Add
box-sizing: border-box;into your#top_menu
这篇关于有人可以告诉我为什么我的overflow-x影响了我的菜单边框吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
