为什么这个Margin会将元素推到其父元素上？

时间：2016-12-07 15:02:14

标签： html css

我正在建立一个网站，其侧边栏上有一些锚链接，上面有一个搜索栏。可以看到here。

从图像中可以看到，搜索栏被向上推到侧边栏的两侧。我希望搜索栏稍微小一些，位于侧边栏的中心，所以我尝试在它周围添加一个5px的边距，但这只是将搜索栏推到侧边栏的右侧。

这是我目前的CSS 

.nav-side-menu {
  overflow: hidden;
  font-size: 18px;
  font-weight: 100;
  background-color: #e6e6e6;
  position: fixed;
  top: 0px;
  width: 20%;
  height: 100%;
  color: #484848;
}
.nav-side-menu .brand {
  background-color: #e6e6e6;
  line-height: 75px;
  display: block;
  text-align: center;
  font-size: 32px;
  border-bottom: 1px solid #484848;
}
.chat-header {
    position: fixed;
    left: 20%;
    width: 80%;
    background-color: #e6e6e6;
    line-height: 75px;
    display: block;
    text-align: center;
    font-size: 32px;
    border-bottom: 1px solid #484848;
    border-left: 1px solid #484848;
}

.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 80px;
  cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  /*font-family: FontAwesome;*/
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  background-color: #3ab795;
}

.nav-side-menu li {
  padding-left: 0px;
  border-bottom: 1px solid #484848;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav-side-menu li a {
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 80%;
  text-decoration: none;
  color: #484848;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  background-color: #3ab795;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

input[type=text]{
    width: 100%;
    position: relative;
    margin: 5px 0 5px 0;
    padding: 3px 10px 3px 20px;
    box-sizing: border-box;
    border: 1px solid #484848;
    border-radius: 20px;
    background-color: #e6e6e6;
}

.search-menu{
    border-bottom: 1px solid #484848;
}

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #e6e6e6;
    color: #484848;
    width: 30px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
}

从图像中可以看出，我还有另一个问题，即“活动”css似乎只覆盖了侧边栏的95％。 CSS导致错误吗？

谢谢！

编辑：忘记了HTML！

<!doctype html>
<html>
    <head>
        <title>EB_MQ Message Centre</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

        <!-- Optional theme -->
        <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">-->
        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>

        <div id="chat-header" class="chat-header"></div>

        <div class="nav-side-menu">
            <div class="brand">User ID</div>
            <div class="search-menu">
                    <input type="text" name="search" placeholder="Search..">
            </div>
            <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
            <div id="menu-list" class="menu-list"></div>
        </div>

        <script type="text/javascript" src="script.js"></script>
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
</html>

1 个答案:

答案 0 :(得分：2)

对于活动类，将padding-right: 100%;添加到以下css规则

.nav-side-menu li a {
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 100%;
  text-decoration: none;
  color: #484848;
}

要缩小搜索范围，只需在search-menu

中添加填充 
.search-menu{
    border-bottom: 1px solid #484848;
    padding: 0 40px; /* whatever value you want, can be percent also */
}


// Wait for the page to load first
        window.onload = function() {

          var toAdd = document.createDocumentFragment();
          var newUL = document.createElement('ul');
          newUL.id = 'menu-content';
          newUL.className = 'menu-content collapse out';

          for(var i = 0; i < 5; i++){
            var newLI = document.createElement('li');
            var newA = document.createElement('a');
            newA.id = 'chat' + i;
            newA.className = "chat";
            newA.addEventListener('click', chatClick, false)
            newA.setAttribute('href', "#");
            newA.innerHTML = "Chat" + (i + 1);
            newLI.appendChild(newA);
            newUL.appendChild(newLI);
          }

          toAdd.appendChild(newUL)
          document.getElementById("menu-list").appendChild(toAdd);

          var chats = document.getElementsByClassName("chat");
          chats[0].click();
          
        }

        function chatClick(){
            var title = document.getElementById("chat-header");
            title.innerHTML = this.innerHTML;
            
            var chats = document.getElementsByClassName("chat");
            for(var i = 0; i < chats.length; i++){
              chats[i].className = "chat";
            }
            this.className = "chat active";
        }
.nav-side-menu {
  overflow: hidden;
  font-size: 18px;
  font-weight: 100;
  background-color: #e6e6e6;
  position: fixed;
  top: 0px;
  width: 20%;
  height: 100%;
  color: #484848;
}
.nav-side-menu .brand {
  background-color: #e6e6e6;
  line-height: 75px;
  display: block;
  text-align: center;
  font-size: 32px;
  border-bottom: 1px solid #484848;
}
.chat-header {
    position: fixed;
    left: 20%;
    width: 80%;
    background-color: #e6e6e6;
    line-height: 75px;
    display: block;
    text-align: center;
    font-size: 32px;
    border-bottom: 1px solid #484848;
    border-left: 1px solid #484848;
}

.nav-side-menu .toggle-btn {
  display: none;
}
.nav-side-menu ul,
.nav-side-menu li {
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 80px;
  cursor: pointer;
}
.nav-side-menu ul :not(collapsed) .arrow:before,
.nav-side-menu li :not(collapsed) .arrow:before {
  /*font-family: FontAwesome;*/
  content: "\f078";
  display: inline-block;
  padding-left: 10px;
  padding-right: 10px;
  vertical-align: middle;
  float: right;
}
.nav-side-menu ul .active,
.nav-side-menu li .active {
  background-color: #3ab795;
}

.nav-side-menu li {
  padding-left: 0px;
  border-bottom: 1px solid #484848;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.nav-side-menu li a {
  padding-left: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  padding-right: 100%;
  text-decoration: none;
  color: #484848;
}
.nav-side-menu li a i {
  padding-left: 10px;
  width: 20px;
  padding-right: 20px;
}
.nav-side-menu li:hover {
  background-color: #3ab795;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

input[type=text]{
    width: 100%;
    position: relative;
    margin: 5px 0 5px 0;
    padding: 3px 10px 3px 20px;
    box-sizing: border-box;
    border: 1px solid #484848;
    border-radius: 20px;
    background-color: #e6e6e6;
}

.search-menu{
    border-bottom: 1px solid #484848;
    padding: 0 40px;
}

@media (max-width: 767px) {
  .nav-side-menu {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
  }
  .nav-side-menu .toggle-btn {
    display: block;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 5px;
    z-index: 10 !important;
    padding: 3px;
    background-color: #e6e6e6;
    color: #484848;
    width: 30px;
    text-align: center;
  }
  .brand {
    text-align: left !important;
    font-size: 22px;
    padding-left: 20px;
    line-height: 50px !important;
  }
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content {
    display: block;
  }
}

body {
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
}
<div id="chat-header" class="chat-header"></div>

<div class="nav-side-menu">
    <div class="brand">User ID</div>
    <div class="search-wrapper">
        <div class="search-menu">
            <input type="text" name="search" placeholder="Search..">
        </div>
    </div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>
    <div id="menu-list" class="menu-list"></div>
</div>

相关问题
最新问题