Question

如果屏幕空间不够，我可以将这个栏（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>

Answer 1

＆＃39; float：left;＆＃39; 会将你的div（nav1，nav2，nav3）并排放在＆＃39; navbar＆＃39;中，除非你希望他们并排。

＆＃39;导航栏＆＃39;没有上限。因此，它一直排在最前面。如果你想让导航栏略微下降，你需要在.css文件中创建一个类或div，并给它一个上边距。

我已经更改了你的＆＃39; nav2＆＃39; css值如下：

#nav2 ul {  
    width: calc(100% / 3);  
    height: 80px;  /* changed 40px to 80px */
    background-color: red;  
    float: left;
    overflow-x: auto; 
    overflow-y: hidden;
    white-space: nowrap; /* added nowrap */  
}

如果您将无序列表项的数量加倍，您将看到我的意思。

这是你想做的吗？

Answer 2

$(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

隐藏溢出的水平栏很奇怪

2 个答案: