html - <li> 跳出 div

Question

我正在尝试制作一个导航栏，它看起来像这样

https://imgur.com/a/wf7Pe

是有链接的那个，忽略白色的div。

问题是，如果调整页面大小，文本会超出 div，位于其下方。

像这样: https://imgur.com/a/cDUIO

对于手机，我使用媒体查询来隐藏导航栏，但我也不想为了这样的分辨率而隐藏它，必须有一个修复，但我找不到它......

这是我的代码:

<div id="linkNavbar" class="mx-auto">
    <div class="row">
        <div style="margin-top: -22px;" class="col text-center" >
            <ul style="list-style-type: none; padding: 0; margin: 0;">

                <li class="liSpace align-middle d-inline">FORUM</li>
                <li class="liSpace align-middle d-inline">CHANGELOG</li>
                <li class="liSpace align-middle d-inline"><img class="img-responsive center-block" src="https://i.imgur.com/sgM2jog.png"></li>
                <li class="liSpace align-middle d-inline">RULES</li>
                <li class="liSpace align-middle d-inline">BAN LIST</li>
                <li class="liSpace align-middle d-inline">DONATE</li>

            </ul>
        </div>
    </div>
</div>

CSS

#linkNavbar {
    position: relative;
    background-color: black;
    color: white;
    font-weight: bold;
    margin-top: 7%;
    padding-left: 4%;
    padding-right: 3%;
    height: 35px;
    border-radius: 10px;
    width: 60%;
}

Answer 1

好吧，如果没有空间，它必须垂直移动。

但是，您可以通过使用 flexbox 使整个 div 居中，减少水平间距来增加空间。 (使用 justify-content: center)

然后您将不得不删除任何阻止它使用可用的整个宽度的填充或边距(或父元素的宽度？)。

但是一旦它和窗口一样大，它就必须打破，因为没有其他可能性。

我不会在这里发布代码，因为你显然使用了一个未指定的 CSS 框架，它可能内置了它。