Question

您好我的导航栏使用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%;}

Answer 1

这是因为您没有类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

Answer 2

在css文件中使用此行

* {余量：0像素;填充：0像素; box-sizing：border-box;}

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

2 个答案: