有人能告诉我为什么我的溢出x是影响我的菜单边界

所以，我添加了一个overflow-x: hidden;这样水平滚动条就不会显示，现在它影响了我在菜单栏上的边框，菜单栏的右侧没有显示它的边框，当我把overflow-x代码从CSS中取出时，边框又回来了，有没有办法保持滚动条隐藏，让右边的边框显示出来，谢谢!

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。为了克服这个问题，你有以下两个选择:

将#top_menu的宽度减小为998px;
将box-sizing: border-box;添加到#top_menu

相关内容

最新更新

热门标签：