Question

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

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

问题是，如果页面调整大小，文本将从div下面移出。

对于手机，我使用媒体查询来隐藏导航栏，但我也不想隐藏它只是为了这样的解决方案，必须有一个修复，我无法找到它...

这是我的代码：

<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-Framework，它可能内置了。

Answer 2

我会使用Flexbox来获取在div内部等间距的链接。使容器显示：flex，flex：1，justify-content：space-around。

<li>离开了div

2 个答案: