Question

当我调整浏览器大小时，导航进入灰色区域而不是保持黑色。有人可以帮我理解为什么这不起作用吗？

HTML

<body>
        <header>
            <div class="wrapper">
                <h1>Business Logo</h1>
                <nav class="nav">
                    <ul>
                        <li><a href="">item 1</a></li>
                        <li><a href="">item 2</a></li>
                        <li><a href="">item 3</a></li>
                        <li><a href="">item 4</a></li>
                        <li><a href="">item 5</a></li>
                    </ul>
                </nav>
            </div><!-- END OF NAV WRAPPER -->

        </header>

        <div class="clearfix"></div>


        <div class="wrapper">

            <div class="boxes">



            </div>

            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>
            <div class="boxes"></div>

        </div> <!-- END OF BOXES WRAPPER -->
</body>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}



/***********************************
    MAIN CONTENT
************************************/

body {
    font-family: 'Source Sans Pro', sans-serif; 
    font-size: 20px;
    background-color: #c5c5c5;
}

.wrapper {
    width: 70%;
    margin: 0 auto;
}

.clearfix {
    clear: both;
}

.button {
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    color: black;
    background-color: yellow;
    padding: 12px;
    display: block;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 2px 2px #999;
    margin-top: 33px;
}

img {
    width: 187px;
    height: 187px;
}



/***********************************
    NAVIGATION
************************************/


header {
    height: 50px;
    background-color: black;
    color: white;
    border-bottom: 4px solid yellow;
}

header h1 {
    position: relative;
    top: -8px;
    display: inline-block;
    color: yellow;
    font-family: 'Merriweather', serif;
    font-size: 1em;
    padding: 10px 0;
}

.nav {
    float: right;
    position: relative;
    margin-top: 13px;
}
/*
.nav ul {
    margin: 0px;
}*/

.nav li {
    display: inline;
    list-style-type: none;
    float: left;
}

.nav a:hover {
    color:  yellow;
}

.nav a {
    /*display: block;*/
    /*line-height: 2em;*/
    /*padding: 10px 10px;*/
    padding-left: 10px;
    padding-right: 10px;
    color: white;
    text-decoration: none;
}



.boxes {
    /*position: relative;*/
    margin-top: 10px;
    margin-right: 5px;
    margin-left: 5px;
    padding: 10px 10px;
    display: inline-block;
    background-color: #fff;
    box-shadow: 0 2px 2px #999;
    width: 187px;
    height: 250px;
}





/***********************************
    FOOTER
************************************/

footer {
    overflow: hidden;
    background-color: black;
    color: white;
    padding: 25px 0;
}

Answer 1

将min-width: 500px;添加到您的包装类中，如下所示：

.wrapper {
    width: 70%;
    margin: 0 auto;
    min-width: 500px;
}

导航不会留在标题内

1 个答案: