Question

我为导航栏创建了一个CSS Box。当我在导航栏中添加新项目或以较低分辨率查看时，新项目会跳转到下一行。但是，盒子的大小不会增加并保持绝对。

由于缺乏声誉而无法发布图片。所以，这是图像的链接

图像1：1366px宽度分辨率的导航栏链接：http://i19.servimg.com/u/f19/15/84/74/16/110.png

图像2：1024x宽度分辨率的导航栏链接：http://i19.servimg.com/u/f19/15/84/74/16/210.png

body{
    /* Setting the default text color, size, page background and a font stack: */
    background:#ebebeb;
    font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size:87.5%;
    color:#7d7d7d;
    line-height: 1.429;
    margin: 0;
    padding: 0;
    text-align: left;
    margin: 0 auto; 
    width: 70%;
}

.mainHeader {
    clear: both;
    overflow:auto;
}

#logo {
    float:left;
}

#logo figcaption{
    visibility: hidden;
}


/*************************
******* NAVIGATION *******
**************************/

nav {
    margin: 90px 5px 10px 5px;
    padding: 8px;
    height: 60px; 
    width: auto;
    font-size: 1.143em;
    line-height: 90px;
    text-align: center;

    background-color: #f9f9f9;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border: 2px solid white;
    box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
}

.mainHeader nav ul {
    list-style: none; 
    margin: 0 auto;
}

.mainHeader nav ul li {
    margin-right: 20px;
    float: left; 
    display: inline; 
}

nav ul li:nth-of-type(1){
    background-image: url('http://islington.ml/images/navigation/activeHome.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(2){
    background-image: url('http://islington.ml/images/navigation/courses.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(3){
    background-image: url('http://islington.ml/images/navigation/lectures.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(4){
    background-image: url('http://islington.ml/images/navigation/admission.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(5){
    background-image: url('http://islington.ml/images/navigation/facilities.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}
nav ul li:nth-of-type(6){
    background-image: url('http://islington.ml/images/navigation/contact.png');
    background-size: 40%;
    background-repeat: no-repeat;
    background-position: center top;
}

.mainHeader nav a:link{
    padding: 5px 15px;
    text-decoration: none;
    font-weight: bold;	
}

     <body>
         <header class="mainHeader">
            <figure id="logo">
                <img src="http://islington.ml/images/logo.png" alt="Islington College Logo">
                <figcaption>ISLINGTON</figcaption>
            </figure> 
            <nav>
                <ul>
                    <li><a href="#" style="color: #EE2B32;">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Lectures</a></li>
                    <li><a href="#">Admission</a></li>
                    <li><a href="#">Facilities</a></li>
                    <li><a href="#">Contact</a></li>
		        </ul>
            </nav>
        <header>
    </body>

如何通过增加内容来调整CSS Box的大小

0 个答案: