我正在尝试创建一个导航栏，左侧是徽标，其余链接位于其余空间。我按照这个帖子中的说明操作：
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
并使用margin:auto;作为ul以使其居中。到目前为止，此工作正常，但是当我在margin内的任何位置添加padding或ul时，链接列表会自动换行。我为box-sizing:border-box;尝试ul但没有成功。我怎样才能解决这个问题？
小提琴：http://jsfiddle.net/30sy5dmy/5/
nav img {
height: 60px;
}
nav {
display: flex;
align-items: center;
justify-content: space-between;
}
.links {
margin: auto;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 2%;
}<nav>
<img src="https://teststein.000webhostapp.com/Logo.png">
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
答案 0 :(得分：2)
列表项目正在换行，因为您正在使用百分比边距。
当您为项目提供2％的水平边距时，浏览器会在确定容器大小后计算2％的长度。换句话说，百分比不计入容器宽度。
因此，当物品的长度增加2％时，总长度超过容器的长度并进行包装。
white-space: nowrap 解决问题的一种方法是使用the white-space property抑制容器中的换行符。这会强制所有项目保持在同一条线上，必要时会溢出容器。
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
white-space: nowrap; /* NEW */
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 2%;
}<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
如果您使用百分比以外的任何值，列表项将不会换行，因为与百分比值不同，它们可以扩展容器以进行调整。
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 1em; /* adjustment */
}<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
弹性容器的初始设置为flex-direction: row和flex-wrap: nowrap。这意味着flex项目将水平排列，无法换行。
nav {
display: flex;
align-items: center;
justify-content: space-between;
border: 1px dashed black; /* for demo only */
}
nav img {
height: 60px;
}
.links {
margin: auto;
padding: 0; /* optional; remove default indentation on list elements */
border: 1px dashed red; /* for demo only */
display: flex; /* new */
}
nav ul li {
display: inline-block;
list-style: none;
margin: 0 1em; /* adjustment; avoid percentage margins on flex items;
see this post:
https://stackoverflow.com/q/36783190/3597276 */
}<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>
此解决方案尝试使用尽可能少的代码来实现目标。希望它有所帮助。
nav { display: flex; align-items: center; }
nav img { height: 60px; }
a:first-of-type { margin-left: auto; }
a:last-of-type { margin-right: auto; }
a + a { margin-left: 1em; }<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 2</a>
<a href="#">Link 2</a>
</nav>
答案 1 :(得分：1)
只需将display: flex添加到links，然后，因为使用弹性项目边距的百分比不会渲染相同的浏览器，请使用ie视口单元。
nav img {
height: 60px;
}
nav {
display: flex;
align-items: center;
}
.links {
display: flex;
margin: auto;
}
nav ul li {
list-style: none;
margin: 0 2vw;
}<nav>
<img src="http://lorempixel.com/output/nature-q-c-60-60-1.jpg">
<ul class="links">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</nav>