Question

一旦我在“nav li”中添加“margin-right：4％”，导航就会突破到第二行 - 如果我使用px而不是％，则不会出现问题，例如：“margin-right ：10px“。我不确定为什么会发生这种情况

<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

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

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

请尝试！

Answer 3

%相对于它的容器宽度取值.... 因此，当您提供4%页边距时，它会应用于所有li，并根据容器宽度将右边距推到4%！

为防止内容突破新行，我建议将white-space:nowrap应用于

example demo

header {
     overflow: hidden;
     white-space:nowrap; /*added*/
}

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

导航突破新的界限

3 个答案: