带有 flex: 1 的列表元素中的文本被移动到新行，有什么方法可以避免这种情况吗?

Question

因为有些单词太长，所以它们被移到了新行。如果我减小字体大小，字体会变得太小。我可以用更长的单词定位元素并赋予它们 flex：2，但随后我失去了对称性。

.wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
.navigation {
height: 55px;
width: 100%;
}
.navUl {
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
padding-top: 8px;
}
.navUl li {
flex: 1;
margin-right: 10px;
}

<div class="navigation">
<div class="wrapper">
<ul class='navUl'>
<li>HOME</li>
<li>ÜBER UNS</li>
<li>UNSERE LEISTUNGEN</li>
<li>PREISZUSAMMENSETZUNG</li>
<li>NÜTZLICHES</li>
<li>GALERIE</li>
<li>VIDEOS</li>
<li>BAUMSCHUTZGESETZ</li>
</ul>
</div>
</div>

Answer 1

根据您的示例，.wrapper(960px( 的大小限制太小，无法将所有列表放在一行中。 您可以使用white-space:nowrap但这不会保持对称，列表将溢出包装器。

最好的选择是修改 .wrapper 以赋予它更大的宽度(大约 1500px 应该可以做到(，或者忍受您的项目在两行上中断的事实。

.wrapper {
width: 1500px;
height: 100%;
margin: 0 auto;
}
.navigation {
height: 55px;
width: 100%;
}
.navUl {
display: flex;
list-style-type: none;
align-items: center;
justify-content: center;
padding-top: 8px;
}
.navUl li {
flex: 1;
margin-right: 10px;	
}

<div class="navigation">
<div class="wrapper">
<ul class='navUl'>
<li>HOME</li>
<li>ÜBER UNS</li>
<li>UNSERE LEISTUNGEN</li>
<li>PREISZUSAMMENSETZUNG</li>
<li>NÜTZLICHES</li>
<li>GALERIE</li>
<li>VIDEOS</li>
<li>BAUMSCHUTZGESETZ</li>
</ul>
</div>
</div>