为什么我的导航栏比李的宽度更宽？

嗨我的导航栏通过使用ol有一个下拉菜单。但是，当我将鼠标悬停在列表上时，您会看到列表的宽度大于ol。我想这是因为白色空间：nowrap;但我希望下拉列表中的文字有一行。所以我使用nowrap。我该怎么办？为什么我的导航栏比李的宽度更宽？

<!DOCTYPE html> 
    <html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
     $(document).ready(function(){ 
      $("#nav ol li").hover(function(){ 
       $(this).find("ol").show(); //when onmouseover //ol ใน nav ol li อีกชั้นนึง 
      }, 
      function(){ //when mouseout 
       $(this).find("ol").hide(); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    <div class="wrapper"> 
      <div id="header"> 

      </div> 
      <div id="nav"> 
       <ol> 
        <li><a href="#">Home</a></li> 
        <li> 
        <a href="#"> SHUJIN </a> 
         <ol> 
          <li><a href="manga_demo.php"> SHUJIN ตอนที่ 1</a></li> 
          <li style="border:none;"><a href="manga_demo2.php"> SHUJIN ตอนที่ 2 </a></li> 
         </ol> 
        </li> 
        <li><a href="#">Contact us</a></li> 
       </ol> 
      </div> 
     </body> 
     </html>

CSS

body 
     { 
      margin:0px; padding:0px; 
      background: url("../assets/grey.jpg") no-repeat center center fixed; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      background-size: cover; 
     } 
     .wrapper 
     { 
      margin:auto;padding:0px;width:70%; 
     } 
     #header  
     { 
      margin:0px;padding:0px;width:100%;height:100px;float:left; 
      background: #99d6ff; 
      background-image: url(""); /* fallback */ 
      background-image: url(""), linear-gradient(#99d6ff, #006bb3); /* W3C */ 

      background-blend-mode: multiply; 
      /*background-position: 10% 50%; มีsize 100% so this will not work*/ 
      background-size: 100%; 
      background-repeat: no-repeat; 

      -webkit-box-shadow: 0px 0px 0px 2px #000000; 
      -moz-box-shadow: 0px 0px 8px 0px #000000; 
      box-shadow: 0px 0px 8px 0px #000000; 

     } 
     #nav{margin:0px;padding:0px;width:100%;float:left; 
     background: #80ffe5; /* For browsers that do not support gradients */ 
     background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */ 
     background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */ 
     background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */ 
     background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */ 

     -moz-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 
      -webkit-box-shadow: 2px 2px 3px #888, -2px 2px 3px #888; 
      box-shadow: 2px 2px 3px #888, -2px 0px 3px #888; 


    } 
     #nav ol{list-style:none;margin:0px;padding:0px;} 
     #nav ol li{display:block;padding:6px 10px;float:left;position:relative;} 
     #nav ol a{display:block;padding:5px 10px;color:#000;text-decoration:none; white-space: nowrap;text-align:center;} 
     #nav ol a:hover{color:green;} 

     #nav ol li:hover{background:lightgreen; 
     -webkit-transition: background-color 0.5s ease-out; 
     -moz-transition: background-color 0.5s ease-out; 
     -o-transition: background-color 0.5s ease-out; 
     transition: background-color 0.5s ease-out; 
     } 
     #nav ol li ol li:hover{background:lightgreen; 
     -webkit-transition: background-color 0.5s ease-out; 
     -moz-transition: background-color 0.5s ease-out; 
     -o-transition: background-color 0.5s ease-out; 
     transition: background-color 0.5s ease-out; 
     } 
      #nav ol ol{position:absolute;top:35px;left:0px;display:none;z-index: 1; 
       background: #80ffe5; /* For browsers that do not support gradients */ 
       background: -webkit-linear-gradient(#80ffe5, #00b38f); /* For Safari 5.1 to 6.0 */ 
       background: -o-linear-gradient(#80ffe5, #00b38f); /* For Opera 11.1 to 12.0 */ 
       background: -moz-linear-gradient(#80ffe5, #00b38f); /* For Firefox 3.6 to 15 */ 
       background: linear-gradient(#80ffe5,#00b38f); /* Standard syntax */ 
      } 
       #nav ol ol li{border-bottom:solid 1px lightgrey;width:100%;}

来源

2016-10-19 doflamingo

可以创建plunker？ –

你可能想要检查元素并覆盖浏览器特定的ol实现 –

嘿，对不起，我忘了添加jQuery代码。现在我已经添加了它。请重新运行它。 – doflamingo

这是因为你没有box-sizing:border-box财产的类#nav ol li。试试这个

#nav ol li { 
    display: block; 
    padding: 6px 10px; 
    float: left; 
    position: relative; 
    box-sizing: border-box; 
}

了解更多关于box-sizing

来源

2016-10-19 04:59:41

在使用中这条线在css文件

* {保证金：0像素;填充：0像素;盒子尺寸：边框;}

来源

2016-10-19 04:58:43

这就是正确的答案为什么downvoted –

为什么我的导航栏比李的宽度更宽？

回答

相关问题