Question

我已经制作了一个导航栏，在我的defult变焦时很好，但是在放大或缩小时，它会分成两行，完全毁掉它。

知道如何阻止这种情况发生吗？任何帮助都感激不尽，这是HTML

<nav>
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="generalGuidance.html">General Guidance</a></li>
        <li><a href="whyGrow.html">Why grow?</a></li>
        <li><a href="usefullSites.html">Usefull Sites</a>
            <ul>
                <li><a href="http://www.bbc.co.uk/gardening/">BBC Gardening</a></li>
                <li><a href="http://www.channel4.com/4homes/rooms/outdoors/garden-grow-your-own">Channel Four Gardening</a></li>
                <li><a href ="http://ngb.org/gardening_links/index.cfm">National Garden</a></li>    
            </ul>
        </li>
        <li><a href="carrot.html#bottom">How To Grow</a> <!--Links to the bottom of the how to grow carrots page -->
            <ul>
                <li><a href="carrot.html">Carrots</a></li>
                <li><a href="turnip.html">Turnips</a></li>
                <li><a href="radish.html">Radishs</a></li>
                <li><a href="parsnip.html">Parsnips</a></li>
                <li><a href="leek.html">Leeks</a></li>
                <li><a href="onion.html">Onions</a></li>
            </ul>
        </li>   
        <li><a href="Forums">Forums</a></li>
    </ul>
</nav>

和CSS

    nav{
    width:1000px;
}
nav a{
    font-weight:500;
    font-family: "arial", Times, serif; 
}

/*Hides the child elements*/
nav ul ul {
    display: none;
}
/* Displays the child elements on mouse over*/
    nav ul li:hover > ul {
        display: block;
        z-index: 20;
}

    nav ul {
    background-color: #3C7F1E; 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0 20px;
    border-radius: 10px;  /*Gives the nav bar rounded corners*/
    list-style: none;
    position: relative;
    display: inline-block;
    margin: 0 auto;
    width:960px;
}
nav ul:after {
        content: ""; clear: both; display: block;
    }

/*Makes the nav bar hozizontal*/
    nav ul li {
    float: left; 
}
/*Changes the elements color on hover*/
    nav ul li:hover {
        background: #577F45;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 25px 40px;
        color: #fff; text-decoration: none;
    }
    nav ul ul {
    background: #337F12; border-radius: 0px; padding: 0;
    position: absolute; top: 100%;
    width:auto;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #4D7F37;
        border-bottom: 1px solid #4D7F37;
        position: relative; 
    }
        nav ul ul li a {
            padding: 15px 40px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #4D7F37;
            }

Answer 1

试试..

nav {
    max-width: 100%;  /*Edit*/
    width: 1000px;
}

nav ul {
    background-color: #3C7F1E;
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
    display: inline-block;
    list-style: none outside none;
    margin: 0 auto;
    max-width: 100%;     /*Edit*/
    padding: 0;          /*Edit*/
    position: relative;
    width: 960px;
       }

导航栏以不同的缩放比例分为两行

1 个答案: