html – 隐藏溢出的水平栏很奇怪

2023年9月17日 232次阅读

如果没有足够的屏幕空间,我可以将这个栏(nav2)设置为可滚动,但它似乎非常奇怪(也因为这是我第一次做水平滚动条这样的事情),ul正在某处顶部,并没有下来,我尝试浮动：左,它工作,但ul不在中间居中(这很重要！)

body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
    
    #nav1 {
    width: calc(100% / 3);
    height: 40px;
    line-height: 40px;
    background-color: black;
    float: left;
    }
    
    #nav2 {
    width: calc(100% / 3);
    height: 40px;
    background-color: red;
    float: left;
    overflow: scroll;
    
    }
    
    #nav3 {
    width: calc(100% / 3);
    height: 40px;
    background-color: yellow;
    float: left;
    }
    
    
    #nav2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    
    height: 40px;
    float: left;
    }
    
    #nav2 ul li {
    display: inline;
    color: black;
    text-decoration: none;
    
    
    }
    
    #nav2 ul a {
    padding: 5px 17px;
    text-decoration: none;
    color: white;
    }
    
    @keyframes sin {
      0% {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
    }
    
    #yvelogo {
    margin-left: 17px;
    padding: 0;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    }
    
    a #yvelogo {
    border: 0;
    }
<!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>yvemiro</title>
      <meta name="author" content="hate">
      <meta name="description" content="description for gogel">
      <meta name="keywords" content="yve,miro,blog">
      <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
     </head>
     <body>
      <div id="navbar">
      <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></a></div>
      <div id="nav2">
      <ul>
    <li><a href="#">Blog</a></li><li><a href="#">Stuff</a></li><li><a href="#">Me</a></li><li><a href="#">Ask</a></li><li><a href="#">Archive</a></li>
    </ul>
    </div>
      <div id="nav3"></div>
      </div>
     </body>
    </html>

最佳答案

$(document).ready(

  function() { 

    $("#nav2").niceScroll();

  }

);
body { font-family: 'Clear Sans', Verdana, sans-serif; margin: 0; }
    
    #nav1 {
    width: 33%;
    height: 40px;
    line-height: 40px;
    background-color: black;
    float: left;
    }
    
    #nav2 {
    width: 34%;
    height: 40px;
    background-color: red;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    }
    
    #nav3 {
    width: 33%;
    height: 40px;
    background-color: yellow;
      float: right;
    }
    
    
    #nav2 ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: block;
    
    }
    
    #nav2 ul li {
    display: inline;
    color: black;
    text-decoration: none;
    
    
    }
    
    #nav2 ul a {
    padding: 5px 17px;
    text-decoration: none;
    color: white;
    }
    
    @keyframes sin {
      0% {transform: rotate(0deg)}
      100% {transform: rotate(360deg)}
    }
    
    #yvelogo {
    margin-left: 17px;
    padding: 0;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    }
    
    a #yvelogo {
    border: 0;
    }

    @media (max-width:990px) {
    #nav2 {
    overflow-y: hidden;
    overflow-x: scroll;
    }
    }
<!DOCTYPE HTML>
    <html>
     <head>
      <meta charset="UTF-8">
      <title>yvemiro</title>
      <meta name="author" content="hate">
      <meta name="description" content="description for gogel">
      <meta name="keywords" content="yve,miro,blog">
      <link rel="stylesheet" href="http://static.tumblr.com/zicio7x/hgpnuuz05/fonts.css" type="text/css">
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
       <script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js">
         </script>
     </head>
     <body>
      <div id="navbar">
      <div id="nav1"><a href="#"><img id="yvelogo" alt="eeh, is it IE or what" src="http://static.tumblr.com/zicio7x/VTfnvi4e4/yvelogowhite.svg"></a></div>
      <div id="nav2">
      <ul>
    <li><a href="#">Blog</a></li><li><a href="#">Stuff</a></li><li><a href="#">Me</a></li><li><a href="#">Ask</a></li><li><a href="#">Archive</a></li>
    </ul>
    </div>
      <div id="nav3"></div>
      </div>
     </body>
    </html>

这应该修复一下.如果您需要垂直居中,我可以再次修改它.

编辑：
添加了自定义滚动条插件和jquery.有关编辑滚动条本身的更多信息,请访问插件官方网站Here

点赞