导航闯入新线路

Question

一旦我添加" rain -right：4％"在" nav li"中，导航就会闯入第二行 - 如果我使用px而不是％，则不会发生问题，例如："边缘右：10px"。我不确定为什么会发生这种情况

jsfiddle：http：//jsfiddle.net/k93k2/

<header>
        <div id="container">
            <div id="logo">
                <a href="#"><img src="http://placehold.it/220x80"/></a>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Services</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Team</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div><!--container-->
</header>

-

.container {
    max-width: 1070px;
    margin: 0 auto;
}
header {
    overflow: hidden;
}
#logo {
    float: left;
}
nav {
    float: right;
}
nav li {
    display: inline;
    text-align: center;
    margin-right: 4%;
}

Answer 1

呢？

header{
    width: 100%;       /* initialization */
    min-width: 590px;  /* some min width */
}
.container {
    max-width: 1070px;
    margin: 0 auto;
}
header {
    overflow: hidden;
}
#logo {
    float: left;
}
nav {
    width: calc(190px + 20%);  /* width of nav is (4x5)% + size of "HomeServicesGalleryTeamContact" */
    min-width: 370px;          /* set some min width */
    float: right;
}

nav li {
    display: inline;
    text-align: center;
    margin-left: 4%;
}

Answer 2

对于您的代码问题是边距和填充<ul>标签。因此，您需要在<ul>中删除margin和padding，如下所示：

nav {
    float: left;
    width: 220px;
}    
ul {
    margin: 0;
    padding: 0;
}

请尝试！

Answer 3

%相对于它的容器宽度，值为值。因此，当您给出4%边距时，它适用于所有li，并根据容器宽度将右键推至4%！

为了防止内容分解为新系列，我建议将white-space:nowrap应用于

示例演示

header {
     overflow: hidden;
     white-space:nowrap; /*added*/
}
nav ul {
    display:inline-block;
    white-space:nowrap;/*added*/
    border:1px solid red;
}