如何消除导航栏和标题之间的空白？

时间：2017-03-30 02:01:17

标签： html css twitter-bootstrap navbar

我想删除导航栏和标题之间的白色间隙，我不知道为什么我得到了差距。我希望有人可以帮助我

＆＃13;
＆＃13; 
@import url(http://fonts.googleapis.com/css?family=Lato);

.container
{
    width:800px;
    overflow:hidden;
    display:inline-block;
    margin-top: 0px;
}
.side-bar
{
    background:#74AFAD;
    position:absolute;
    height:100%;
    width:200px;
    color:#fff;
    transition: margin-left 0.5s;
}

.side-bar ul
{
    list-style:none;
    padding:0px;
    
}

.side-bar ul li.menu-head
{
    font-family: 'Lato', sans-serif;
    padding:20px;
}


.side-bar ul li.menu-head a
{
    color:#fff;
    text-decoration:none;
    height:50px;
}


.side-bar ul .menu-head  a
{
    color:#fff;
    text-decoration:none;
    height:50px;
    margin: 0;
}

.side-bar ul .menu li  a 
{
    color:#fff;
    text-decoration:none;
    display:inline-table;
    width:100%;
    padding-left:20px;
    padding-right:20px;
    padding-top:10px;
    padding-bottom:10px;
}

.side-bar ul .menu li  a:hover
{
    border-left:3px solid #ECECEA;    
    padding-left:17px;
}

.side-bar ul .menu li  a.active
{
    padding-left:17px;
    background:#D9853B;
    border-left:3px solid #ECECEA;
}

.side-bar ul .menu li  a.active:before {
   content:"";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    
    border-left: 7px solid #D9853B;
    margin-top: -10px;
    margin-left: 180px;
}


.content
{
    padding-left: 200px;
    transition: padding-left 0.5s;
}

.active > .side-bar
{
    margin-left:-150px;   
    transition: margin-left 0.5s;
}

.active > .content
{
    padding-left:50px;
    transition: padding-left 0.5s;
}
#logout_sidebar {
    position: absolute;
    display: inline-block;
    bottom: 0;
    width: 100%;
}

@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width:calc(100% + 220px);
  }
    
  .row-offcanvas-left
  {
    left: -220px;
  }

  .row-offcanvas-left.active {
    left: 0;
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color:#f5f5f5;
  float: left;
  height:100%;
  position:relative;
  overflow-y:auto;
  overflow-x:hidden;
}
#main {
  height:100%;
  overflow:auto;
}
＆＃13; 
    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link rel="stylesheet" type="text/css" href="css/navbar.css">

  <title> Bagus Gamestore Admin Dashboard</title>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="wrapper">
          <div class="side-bar">
                <ul>
                    <li class="menu-head">
                        ADMIN PANEL <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
                    </li>
                    <div class="menu">
                        <li>
                            <a href="#" class="active">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">User List<span class="glyphicon glyphicon-user pull-right"></span></a>
                        </li>
                        <li>
                            <a href="#">Add New Product<span class="glyphicon glyphicon-plus pull-right"></span></a>
                        </li>
                        <li>
                            <a href="welcome.php">Go to Website <span class="glyphicon glyphicon-globe pull-right"></span></a>
                        </li>
                    </div>

                    <div class="menu ">
                    <li id="logout_sidebar">
                      <a href="logout.php">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>
                    </li>  
                    </div>
                </ul>
          </div>   
            <div class="content">
            <!-- show user list -->
            <!-- end of show user list-->

            </div>
    </div>
  </div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

正如你所看到的那样，在管理面板上有一个小小的差距，我如何消除这些差距？谢谢你

2 个答案:

答案 0 :(得分：0)

申请

margin: 0px;

到你的身体并移除

display:inline-block;
来自您容器的

出现 工作，但这可能不是你想要的，这取决于你在页面上想要的其他元素。

答案 1 :(得分：0)

您需要使用.side-bar将div top: 0;明确地放在其父级的顶部。 （注意这个di已经定位为绝对值）

.side-bar{
  top: 0;
  }

下面的代码段

@import url(http://fonts.googleapis.com/css?family=Lato);
.container {
  width: 800px;
  overflow: hidden;
  display: inline-block;
  margin-top: 0px;
}

.side-bar {
  background: #74AFAD;
  position: absolute;
  height: 100%;
  width: 200px;
  color: #fff;
  transition: margin-left 0.5s;
}

.side-bar ul {
  list-style: none;
  padding: 0px;
}

.side-bar ul li.menu-head {
  font-family: 'Lato', sans-serif;
  padding: 20px;
}

.side-bar ul li.menu-head a {
  color: #fff;
  text-decoration: none;
  height: 50px;
}

.side-bar ul .menu-head a {
  color: #fff;
  text-decoration: none;
  height: 50px;
  margin: 0;
}

.side-bar ul .menu li a {
  color: #fff;
  text-decoration: none;
  display: inline-table;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.side-bar ul .menu li a:hover {
  border-left: 3px solid #ECECEA;
  padding-left: 17px;
}

.side-bar ul .menu li a.active {
  padding-left: 17px;
  background: #D9853B;
  border-left: 3px solid #ECECEA;
}

.side-bar ul .menu li a.active:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 7px solid #D9853B;
  margin-top: -10px;
  margin-left: 180px;
}

.content {
  padding-left: 200px;
  transition: padding-left 0.5s;
}

.active>.side-bar {
  margin-left: -150px;
  transition: margin-left 0.5s;
}

.active>.content {
  padding-left: 50px;
  transition: padding-left 0.5s;
}

#logout_sidebar {
  position: absolute;
  display: inline-block;
  bottom: 0;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all 0.25s ease-out;
    -moz-transition: all 0.25s ease-out;
    transition: all 0.25s ease-out;
    width: calc(100% + 220px);
  }
  .row-offcanvas-left {
    left: -220px;
  }
  .row-offcanvas-left.active {
    left: 0;
  }
  .sidebar-offcanvas {
    position: absolute;
    top: 0;
  }
}

#sidebar {
  width: inherit;
  min-width: 220px;
  max-width: 220px;
  background-color: #f5f5f5;
  float: left;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

#main {
  height: 100%;
  overflow: auto;
}

.side-bar {
  top: 0;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/main.js"></script>
  <link rel="stylesheet" type="text/css" href="css/navbar.css">

  <title> Bagus Gamestore Admin Dashboard</title>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="wrapper">
        <div class="side-bar">
          <ul>
            <li class="menu-head">
              ADMIN PANEL <a href="#" class="push_menu"><span class="glyphicon glyphicon-align-justify pull-right"></span></a>
            </li>
            <div class="menu">
              <li>
                <a href="#" class="active">Dashboard <span class="glyphicon glyphicon-dashboard pull-right"></span></a>
              </li>
              <li>
                <a href="#">User List<span class="glyphicon glyphicon-user pull-right"></span></a>
              </li>
              <li>
                <a href="#">Add New Product<span class="glyphicon glyphicon-plus pull-right"></span></a>
              </li>
              <li>
                <a href="welcome.php">Go to Website <span class="glyphicon glyphicon-globe pull-right"></span></a>
              </li>
            </div>

            <div class="menu ">
              <li id="logout_sidebar">
                <a href="logout.php">Logout<span class="glyphicon glyphicon-log-out pull-right"></span></a>
              </li>
            </div>
          </ul>
        </div>
        <div class="content">
          <!-- show user list -->
          <!-- end of show user list-->

        </div>
      </div>
    </div>
  </div>
</body>

</html>

相关问题
最新问题