所以我有一个带有按钮的栏,我在上面调用了一个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;
}
它看起来是这样的:
发布于 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>
发布于 2019-03-12 04:01:22
您需要在#controlBar设置overflow: none
或overflow: auto
,因为无论是否存在溢出,都会显示带有overflow: scroll
的滚动条。
发布于 2019-03-12 04:06:33
尝试将overflow: hidden;
添加到您的#controlBar
。这应该可以解决问题。
干杯!:)
https://stackoverflow.com/questions/55109285
复制相似问题