Question

因此，我有一个带有按钮的工具栏，在其上我称为control bar。我希望它贴在屏幕的底部，并且它也要具有整个屏幕的宽度。

由于某种原因，栏的底部和右侧有一些空白。（有关更多信息，请参见图像），我不明白为什么这样做。我尝试删除control bar的内容并输入一个字符，但是它仍显示相同的行为。也许我没有注意到CSS中的缺陷？

这是HTML：

    <div id="controlBar">
        <button id="communityList" class="sideMenuButton hvr-grow" title="Community List"><i class="fas fa-th-list"></i></button>

        <button id="joinCommunity" class="sideMenuButton hvr-grow" title="Join Community"><i class="fas fa-key"></i></button>

        <button id="createCommunity" class="sideMenuButton hvr-grow" title="Create a Community"><i class="fas fa-plus"></i></button>

        <button id="userProfile" class="sideMenuButton hvr-grow" title="Profile"><i class="fas fa-user-cog"></i></button>

        <button class="sideMenuButton hvr-grow" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();"><i class="fas fa-sign-out-alt"></i></button>
        <form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">@CSRF</form>
    </div>

CSS：

        #controlBar {
            position: fixed;
            background-color: #282929;
            left: 0px;
            bottom: 0px;
            right: 0px;
            white-space: nowrap;
            overflow: scroll;
            width: 100%;
            text-align: center;
            clear: both;
            margin: 0px;
        }

        .sideMenuButton {
            background-color: #221;
            color: white;
            border-radius: 50px;
            border: none;
            margin: 0.8rem;
            width: 3rem;
            height: 3rem;
        }

是这样的：

可能不是边界，但我不知道该如何轻松地解释它。

Answer 1

删除溢出滚动

 #controlBar {
            position: fixed;
            background-color: #282929;
            left: 0px;
            bottom: 0px;
            right: 0px;
            white-space: nowrap;
           
            width: 100%;
            text-align: center;
            clear: both;
            margin: 0px;
        }

        .sideMenuButton {
            background-color: #221;
            color: white;
            border-radius: 50px;
            border: none;
            margin: 0.8rem;
            width: 3rem;
            height: 3rem;
        }

<div id="controlBar">
        <button id="communityList" class="sideMenuButton hvr-grow" title="Community List"><i class="fas fa-th-list"></i></button>

        <button id="joinCommunity" class="sideMenuButton hvr-grow" title="Join Community"><i class="fas fa-key"></i></button>

        <button id="createCommunity" class="sideMenuButton hvr-grow" title="Create a Community"><i class="fas fa-plus"></i></button>

        <button id="userProfile" class="sideMenuButton hvr-grow" title="Profile"><i class="fas fa-user-cog"></i></button>

        <button class="sideMenuButton hvr-grow" onclick="event.preventDefault(); document.getElementById('frm-logout').submit();"><i class="fas fa-sign-out-alt"></i></button>
        <form id="frm-logout" action="{{ route('logout') }}" method="POST" style="display: none;">@CSRF</form>
    </div>

Answer 2

您需要在#controlBar上设置overflow: none或overflow: auto，因为显示overflow: scroll滚动条，无论是否有溢出。

Answer 3

尝试将overflow: hidden;添加到您的#controlBar中。那应该可以解决问题。

干杯！：）

CSS在div中添加边框，其中未指定边框

3 个答案: