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元素成为灵活容器＆amp;将您的文本包装在包装器中（在我的情况下为.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>

希望这有帮助！

Answer 2

请尝试以下代码，

<!DOCTYPE html>
<html lang="en">
    <head>
    <title>Menu</title>
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
    </head>
    <body class="no-skin">
            <div id="sidebar" class="sidebar responsive ace-save-state">
                <ul class="nav nav-list">
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> Applications </span>
                            <b class="arrow fa fa-angle-down"></b>
                        </a>
                        <b class="arrow"></b>
                    </li>
                    <li class="">
                        <a href="#" class="dropdown-toggle">
                            <i class="menu-icon fa fa-list"></i>
                            <span class="menu-text"> Applications </span>
                            <b class="arrow fa fa-angle-down"></b>
                        </a>
                        <b class="arrow"></b>
                    </li>
                </ul><!-- /.nav-list -->
            </div>
    </body>
</html>

要获取相关的CSS文件，请点击此处https://github.com/suthagar23/AdmissionSystem/tree/master/public

Answer 3

编辑：我认为问题是片段输出的视口较小并且吃了一些样式，如果您希望保留对所提供代码的响应能力，则必须通过@media查询调整值：

Full resizable JSFiddle here（与下面的代码段相比，更改了一些CSS，以使其在更大的视口中看起来不错）

大视口：

较小的视口：

通过在<span>上包装文字，从文本菜单中隔离图标。制作li个relative和图标absolute并根据需要调整值：

.navbar-fixed-left {
  width: 180px;
  position: fixed;
  border-radius: 0;
  height: 100%;
  background-color: #F0F0F0;
  border-right: 1px solid #bdc3c7;
}
ul.nav.navbar-nav {
  margin-top: 0;
}
.navbar-fixed-left .navbar-nav li {
  float: none;
  width: 194px;
  border-top: 1px solid #bdc3c7;
  position: relative;
  border-right: 1px solid lightgray;
}
li:nth-child(3) {
  border-bottom: 1px solid #bdc3c7;
}
.navbar-fixed-left .navbar-nav li a:hover {
  background-color: gainsboro;
}
.navbar-fixed-left + .container {
  padding-left: 160px;
}
.navbar-fixed-left .navbar-nav > li > .dropdown-menu {
  margin-top: -50px;
  margin-left: 140px;
}
span {
  margin-left: 60px;
  color: gray;
}
aside {
  margin-top: 55px;
}
i.fa {
  border-right: 1px solid #bdc3c7;
  padding: 10px 15px;
  position: absolute;
  top: 0;
  bottom: 0;
  line-height: 20px;
}
.color1 {
  border-left: 3px solid red;
  margin-left: -1px;
}
.color2 {
  border-left: 3px solid blue;
  margin-left: -1px;
}
.color3 {
  border-left: 3px solid green;
  margin-left: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<aside>
  <div class="navbar navbar-fixed-left">
    <ul class="nav navbar-nav">
      <li>
        <a href="#">
          <i class="fa fa-plus color1" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-plus color2" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-plus color3" aria-hidden="true" style="color: grey;"></i><span>CREATE</span>
        </a>
      </li>
    </ul>
  </div>
</aside>

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

3 个答案: