- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个页面有一个深灰色的侧边栏,其中有一个 ul,其中包含一些导航。目前,UL 正被推到侧边栏中。
fiddle :http://jsfiddle.net/PWZJd/
我希望 UL 被压在边栏的左侧。然后我可以添加一些填充以将其移动到我认为合适的位置。
HTML:
<div class="content">
<header id="myNav" class="top_block navbar-fixed-top" >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">4Tell</a></li>
<li><a href="#">Console 1</a></li>
<li><a href="#">Console 2</a></li>
<li><a href="#">About</a></li>
</ul>
</header>
<aside class="background sidebar">
<div class="sidenav">
<ul class="menu side-menu">
<li><a href="#">NCR at your service</a></li>
<ul class="sub-menu">
<li>My Support Link</li>
<li>My Asset List</li>
<li>My Invoices</li>
<li>My Somthing Else</li>
</ul>
<li><a href="#">Q2C MAC</a></li>
<ul class="sub-menu">
<li>Move</li>
<li>Add</li>
<li>Change</li>
<li>Swap</li>
</ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</aside>
<div class="left_block sidebar">
</div>
<div class="bottom_block footer">
<p class="text-center">Designed by Steve Wilson <br>With contributions from Alex Cronon and Robert Moua</p>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.content {
min-height: 100%;
position: relative;
overflow: auto;
z-index: 0;
}
.background {
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
margin: 0;
padding: 0;
}
.top_block {
width: 100%;
display: block;
}
.bottom_block {
position: absolute;
width: 100%;
display: block;
bottom: 0;
}
.left_block {
display: block;
float: left;
}
.right_block {
display: block;
float: right;
}
.center_block {
display: block;
width: auto;
}
.background.sidebar {
height: auto !important;
padding-bottom: 0;
left: 0;
width: 200px;
background-color: #33404c;
margin-top: 50px;
margin-bottom: 50px;
border-right: 1px solid;
}
.sidebar {
height: auto;
width: 20%;
padding-bottom: 75px;
}
.footer {
width: 100%;
height: 50px;
background-color: #e3e6ea;
padding-top: 5px;
}
.sidenav {
margin-top: 10px;
color: #f9fafb;
}
.side-menu {
font-size: 1.2em;
font-family: 'Open Sans', sans-serif;
list-style: none;
line-height: 2em;
}
*注意:我已经为 Stack Overflow 删除了一些代码,请参阅 fiddle 以获得更完整的版本。
最佳答案
将侧边菜单上的 padding
和 margin
调整为 0。
关于html - 侧边栏列表被推到右边,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18496094/
我必须为 IE11 编写一些网格回退。 我想将元素 4 放在右下角,以便元素 1 可以一直向下延伸到底部吗? 我认为这对 flexbox 来说是不可能的,对吧? : https://jsfiddle.
您好,我正在尝试让 2 个 div 在左侧与右侧对齐。 #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 诀窍是当浏览器窗口变小时,我希望#div2 位于
如何才能点击 EditText 的右侧可绘制对象(查看屏幕截图)?我尝试了几种方法,但总是卡住。 public static Matcher withEditTextDrawable(final in
这个问题在这里已经有了答案: In CSS Flexbox, why are there no "justify-items" and "justify-self" properties? (6
所以我有 10 个复选框,每个标签都取自数组中相应的索引。我正在使用 ng-repeat 来展示它们: {{entity}}
我是一名优秀的程序员,十分优秀!