[英]Why does this Margin push the element over its parent?
我正在建立一個網站，該網站的側邊欄上有一些錨定鏈接，上方有一個搜索欄。 可以在這里看到。
從圖像中可以看到，搜索欄在側欄的兩側被向右推。 我希望搜索欄較小一些，並位於側邊欄的中央，因此我嘗試在其周圍添加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>
對於活動類，請添加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 ai { 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>
為什么元素的負底部邊距會降低該元素的父級高度？
[英]Why does a negative bottom margin on an element decrease the height of parent of that element?
為什么設置此子元素的上邊距將其父容器向下推？
[英]Why is setting the top-margin of this child element pushing its parent container down with it?
為什么在我的div中添加頁邊距會將其內容（列）推離頁面？
[英]Why does adding a margin to my div push its content (columns) off the page?
為什么<a>在切換其父div之前出現</a>我的<a>元素</a>
[英]Why does my <a> element appear before its parent div is toggled
為什么將子級定位為其相關父級為絕對子級，將其推到父級div之外？
[英]Why does positioning child as absolute to its relevant parent push it outside of the parent div?
為什么堆疊的HTML塊元素之間的邊距空間會崩潰，而不是每個元素都聲明自己的邊距空間？
[英]Why does the margin space between stacked HTML block elements collapse instead of each element asserting its own margin space?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.