CSS正在将边框添加到未指定边框的div
CSS正在将边框添加到未指定边框的div
提问于 2019-03-12 03:47:46
所以我有一个带有按钮的栏，我在上面调用了一个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;
}它看起来是这样的：
- 可能不是一个边界，但我不知道如何轻松地解释它。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-03-12 04:01:13
移除溢出滚动
#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>
Stack Overflow用户
发布于 2019-03-12 04:01:22
您需要在#controlBar设置overflow: none或overflow: auto，因为无论是否存在溢出，都会显示带有overflow: scroll的滚动条。
Stack Overflow用户
发布于 2019-03-12 04:06:33
尝试将overflow: hidden;添加到您的#controlBar。这应该可以解决问题。
干杯！:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55109285
复制相关文章
相似问题