代码之家 › 专栏 › 技术社区 › Crundee MC

如何删除溢出导致的滚动条?

navbar overflow scrollbar css html

Crundee MC · 技术社区 · 7 年前

当我将固定位置导航栏的overflow-x设置为hidden时,是否可以删除出现的第二个小滚动条?

图像链接: Right Here!~

这是我的代码:

HTML:

<div id="main-style">
<nav>
    <img src="images/logo_3.png">
    <ul>
        <li><a href="#">Home</a></li><!--
        --><li><a href="#">About</a></li><!--
        --><li><a href="#">Contact</a></li><!--
        --><li><a href="#">Menu</a></li>
    </ul>
</nav>

CSS:

    body {
  margin: 0;
  width: 100%;

  html, body {
  position: relative;
  overflow-x: hidden;
  height: 100%;
   }

  *, *:before, *:after {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box; }

*{
    margin: 0;
    padding: 0;
    }

    #main-style{
        width: 100%;
        position: fixed;
        z-index: 5; /*The Highest Index*/
    }

    nav{
        width: 100%;
        height: 60px;
        display: block;
        overflow-x: hidden;
    }

nav ul li{
    list-style-type: none;
    display: inline-block;
}

使用chrome的im电流

注:

导航栏中元素的所有高度均已正确设置为60px。 希望你能帮助我。非常感谢!