我想创建一个包含两个部分的顶部栏。第一个是 230px 部分(即黑色部分)。第二部分是灰部分。我想要第二部分作为另一个 div。
当我在大屏幕上打开它时,我的问题出现了。发生以下情况:
这是下面的 HTML 代码:
<div id="topNav">
<div class="websiteName">
<h1><i class="fa fa-paper-plane"></i> Admin Panel</h1>
</div>
<div class="topbar">
<a class="mainMenuTrigger" data-type="on"><i class="fa fa-long-arrow-left"></i></a>
<a class="settingsTrigger"><i class="fa fa-cog fa-spin fa-fw"></i></a>
</div>
这是 CSS:
#topNav{
width: 100%;
display: inline-block;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.websiteName{
width: 230px;
display: block;
float: left;
background: #242A34;
padding: 15px 0;
}
.websiteName h1{
color: #fff;
font-size: 18px;
margin: 0;
padding: 0;
text-align: center;
font-family: $font-family-base;
}
.topbar{
background: #fff;
display: block;
height: 50px;
position: relative;
width: 1135px;
float: left;
}
最佳答案
更新:
width: calc(100% - 230px);
:这允许响应式顶部栏。- 剥离了
float
并使用position: absolute
而不是inline-block
请参阅下面的一些简单示例:
*, :before, :after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#topNav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99;
}
.websiteName {
vertical-align: top;
width: 230px;
height: 50px;
position: absolute;
top: 0;
left: 0;
background: #242A34;
padding: 15px 0;
}
.websiteName h1 {
color: #fff;
font-size: 18px;
margin: 0;
padding: 0;
text-align: center;
}
.topbar {
background: #ccc;
position: absolute;
top: 0;
left: 230px;
height: 50px;
width: calc(100% - 230px);
}
<div id="topNav">
<div class="websiteName">
<h1>Admin Panel</h1>
</div>
<div class="topbar">
</div>
</div>
关于html - 如何使用 CSS 创建响应式顶部栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36735647/