Question

页面上的其他所有内容都会在页面调整大小时展开或缩小，但组成导航的列表除外。我究竟做错了什么？好像第一个项目固定在左侧。

codepen：http://codepen.io/kiddigit/pen/mEPENJ?editors=1100

    <header>
        <img src="images/m_and_m_logo.png" />
        <ul id="nav">
            <li><a href="#">Gift Baskets and Catering</a></li>
            <li><a href="#">Tasting Calendar</a></li>
            <li><a href="#">Membership</a></li>
            <li><a href="#">Special Events</a></li>
        </ul>
    </header>

*{
    width:100%;
    border:0px solid black;
    -moz-box-sizing: border-box; 
     -webkit-box-sizing: border-box; 
     box-sizing: border-box; 
     font-family: 'Roboto', sans-serif;
}

header {
    width: 100%;
    margin: 0 auto;
}

#nav, li {
    display: inline;
    margin-right: 10%;
 }


 header img {
    width: 50%;
    display: block;
    margin: 0 auto; 
 }


footer li {
    padding: 15px;
    margin-top: 100px;
    display: inline;
}

.social_icons {
    width: 5%;
    margin: 20px;
}
#body {
    padding-top: 20px;
    padding-bottom: 20px;
    width: 90%;
    margin: 0 auto;
    height: 900px;
}

#box_left {
    float: left;    
    width: 48%;
    height: 100%;
}

#box_left, p {
    text-align: center;
}

#box_right {
    float: right;   
    width: 48%;
    height: 100%;
}
#box_right, p {
    text-align: center;
}
#store {
    font-size: 22px;
    font-weight: 800;
}
footer {
    text-align: center;
    margin: 0 auto;
    width: 90%;
    height: 100px;
}

Answer 1

不确定您的目标，但您可能想要更改此选择器：

#nav, li {
    display: inline;
    margin-right: 10%;
 }

到此：

#nav li {
    display: inline;
    margin-right: 10%;
 }

（#nav后没有逗号 - 否则这些设置同时适用于该页面上的#nav AND 所有 li元素。

我的导航有什么问题？

1 个答案: