CSS flex布局:添加填充或页边距时换行
我正在尝试创建一个导航栏，在左侧创建一个徽标，并在剩余空间居中显示链接。我遵循了这个线程中的说明：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?，并对ul使用了margin:auto;，以使其居中。到目前为止，这一切都运行得很好，但是当我在ul中添加margin或padding anywhere时，链接列表就会打包。我在ul上试用了box-sizing:border-box;，但没有成功。我该如何解决这个问题呢？小提琴：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>
回答 2
Stack Overflow用户
发布于 2017-10-30 07:18:42
列表项是换行的，因为您使用的是百分比边距。
当您将项目的水平边距设置为2%时，浏览器将在确定容器大小后计算该2%的长度。换句话说，百分比不会计入容器宽度。
因此，当将2%的长度添加到物品上时，总长度超过容器的总长度，并发生包装。
解决方案#1：white-space: nowrap
解决此问题的一种方法是使用the 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>
解决方案#2:不要使用百分比值
如果使用百分比以外的任何值，列表项将不会换行，因为与百分比值不同的是，它们可以扩展容器以便于容纳。
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>
解决方案#3:使用flexbox
flex容器的初始设置是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>
解决方案#4:干净有效的方法
此解决方案尝试使用尽可能少的代码来实现此目标。希望能有所帮助。
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>
Stack Overflow用户
发布于 2017-10-30 06:12:43
只需将display: flex添加到links，然后，因为使用百分比作为flex项目的边距不会呈现相同的跨浏览器，所以使用例如视口单位。
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>
https://stackoverflow.com/questions/47005656
复制相似问题
腾讯云开发者
