将图标相互分离的 CSS 设计问题

Question

我正在尝试复制一个网站，但有一些 CSS 问题我无法找到答案。现在，我想让我的黑色导航栏如下图所示。这是我的代码http://jsfiddle.net/FLWb5/1/ 我需要复制它作为编码挑战的一部分，我是否应该在 css 框架上构建它，什么是最好的方法

这是指向黑色导航栏图标的部分代码：

<div id="content">
<div id="left_nav_bar">
    <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

尝试将z-index:-1; 赋予您的垂直元素。

还研究了 CSS 中的 z-index。

希望你能做到。

Answer 2

试试这个：

<div id="content">
    <div id="left_nav_bar">
        <i class="ss-icon">home</i><hr>
        <i class="ss-icon">time</i><hr>
        <i class="ss-icon">user</i><hr>
        <i class="ss-icon">question</i><hr>
        <i class="ss-icon">play</i>
    </div>

还有 CSS：

hr {
    border: 0; border-top: 1px solid gray; }

Answer 3

你的 html/css 太乱了，所以我花了一些时间来修复一个简单的小提琴，让你知道如何做你想做的事。不要介意颜色和所有这只是一个简单的演示。你还想从这个演示中得到什么，让我知道。

使用导航项进行编辑
DEMO

希望对你有帮助

<div class="container clearfix">
<div class="nav">
    <a href="#" class="nav__link"></a>
    <a href="#" class="nav__link"></a>
    <a href="#" class="nav__link"></a>
    <a href="#" class="nav__link-last"></a>
</div>

<div class="timeline">
    <div class="timeline__line"></div>
    <div class="timeline__item clearfix">
        <div class="timeline__day"></div>
        <div class="timeline__icon"></div>
        <div class="timeline__text"></div>
    </div>

   <div class="timeline__item clearfix">
        <div class="timeline__day"></div>
        <div class="timeline__icon"></div>
       <div class="timeline__text"></div>
    </div>
</div>

.clearfix:after {
  content:"";
  display:table;
  clear:both;
}

/* nav start */

.nav {
    position: relative;
    float: left;
    width: 80px;
    height: 400px;
    background-color: #111;
}

.nav__link {
    display: block;
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #dcdcdc;
}

.nav__link-last {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 60px;
    border-top: 1px solid #dcdcdc;
    background-color: #999;
}

/* nav end */

/* timeline start */

.timeline {
    position: relative;
    float: left; 
    width: 300px;
    height: 400px;
    background-color: #f9f9f9;
}

.timeline__line {
    position: absolute;
    height: 100%;
    width: 2px;
    top: 0;
    left: 80px;
    background-color: #dcdcdc;
}

.timeline__item {
    position: relative;
    z-index: 100;
    width: 100%;
    min-height: 40px;
    margin-top: 30px;
}

.timeline__day {
    float: left;
    width: 62px;
    min-height: 40px;
    background-color: aqua;
}

.timeline__icon {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 25px;
    background-color: #111;
}

.timeline__text {
    float: left;
    min-width: 100px;
    min-height: 40px;
}

/* timeline end */