Question

我尝试重新创建网站并以某种方式定位图标。目前我的左侧有一个带有图标的黑色导航栏。我希望黑色导航栏一直延伸到页面底部，我也希望图标分开。

这是CSS代码：

#left_nav {
border: solid black;
}

#left_nav i {
color: gray;
padding-right: 35%;
padding-left: 35%;
margin-top: 60%;
}

HTML code：

        <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>

Answer 1

http://jsfiddle.net/fmpeyton/3L5YV/

一些事情：

内联元素（即<i>）不能有边距。您必须通过display:block;
为了使侧边栏到达整个页面，您可以将其高度设置为100％，但只有在将其父级（在本例中为BODY和并发HTML元素）的高度设置为100％高度之后。 / LI>

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
}

左导航的CSS定位

1 个答案: