我正在尝试重新创建一个网站并以某种方式放置图标。目前,我在左侧有一个带有图标的黑色导航栏。我希望黑色导航栏一直延伸到页面底部,我还希望将图标分开。
这是CSS代码:
#left_nav {
border: solid black;
}
#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}
HTML代码:
<div id="left_nav" class="grid_2 alpha">
<i class="ss-icon">home</i>
<i class="ss-icon">time</i>
<i class="ss-icon">user</i>
<i class="ss-icon">question</i>
<i class="ss-icon">play</i>
</div>
最佳答案
http://jsfiddle.net/fmpeyton/3L5YV/
一些事情:
- 行内元素(即
<i>
)不能有边距。您必须通过display:block;
将该元素设为 block 级元素 - 为了使侧边栏覆盖整个页面,您可以将其高度设置为 100%,但前提是将其父元素(在本例中为 BODY 和同时存在的 HTML 元素)的高度设置为 100% 高度。
CSS:
html, body{
height: 100%; // height declared so child #left_nav can expand to this height
}
#left_nav {
border: solid black;
height: 100%; // will expand to height of parent
}
#left_nav i {
display:block; // added display:block; to allow for margin
color: gray;
padding-right: 35%;
padding-left: 35%;
margin: 10px 0; // only available to block level elements
}
关于html - 左侧导航的 CSS 定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25149566/