html - 如何使用图标创建左侧导航栏

Question

我正在训练我糟糕的 CSS 技能，但我不知道如何创建左侧导航栏(见下图)。

注意:我已经有一个顶部导航栏......并且在两者中间将存在页面内容。

<aside>
    <div class="navbar navbar-fixed-left">
        <ul class="nav navbar-nav">
            <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i> CREATE
                </a>
            </li>
        </ul>
    </div>
</aside>

还有我的CSS:

                        .navbar-fixed-left {
                      width: 180px;
                      position: fixed;
                      border-radius: 0;
                      height: 100%;
                      background-color: #F0F0F0;
                      border-right: 1px solid #bdc3c7;
                    }

                    .navbar-fixed-left .navbar-nav > li {
                      float: none; 
                      width: 178px;
                    }

                    .navbar-fixed-left + .container {
                      padding-left: 160px;
                    }

                    .navbar-fixed-left .navbar-nav > li > .dropdown-menu {
                      margin-top: -50px;
                      margin-left: 140px;
                    }


                    aside {
                        margin-top: 55px;
                    }

Answer 1

您可以尝试 CSS Flexbox。让你的 ul li a 元素成为一个 flex 容器并将你的文本包装在一个包装器中(在我的例子中是 .text)。并应用以下属性:

ul li a {
  display: flex;
  text-decoration: none;
}

看看下面的片段:

body {
  margin: 0;
}

.navbar-fixed-left {
  width: 180px;
  position: fixed;
  border-radius: 0;
  height: 100%;
  background-color: #F0F0F0;
  border-right: 1px solid #bdc3c7;
}

.navbar-fixed-left + .container {
  padding-left: 160px;
}

.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}


aside {
    margin-top: 55px;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li a {
  display: flex;
  text-decoration: none;
}

ul li a:hover {
  background: #E0E1E6;
}

ul li a i {
  padding: 10px;
  border-right: 1px solid #bdc3c7;
}

ul li a .text {
  padding: 10px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<aside>
    <div class="navbar navbar-fixed-left">
        <ul class="nav navbar-nav">
            <li style="border-right: 0px solid #bdc3c7; border-top: 0.5px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
            <li style="border-top: 1px solid #bdc3c7; border-bottom: 1px solid #bdc3c7;">
                <a href="#">
                    <i class="fa fa-plus" aria-hidden="true" style="color: grey;"></i><span class="text">CREATE</span>
                </a>
            </li>
        </ul>
    </div>
</aside>

希望这对您有所帮助!