html - 带有 flex : 1 gets moved to a new line, 的列表元素内的文本有什么方法可以避免这种情况？

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>