我不知道如何停止让我的孩子div溢出其父母的margin-top

当我设置子div的margin-top属性时，它总是溢出，当我将父母的位置设置为相对，并且它的位置为绝对它在页面中间偏向一侧。孩子：menu_button_container，父：标题。我不知道如何停止让我的孩子div溢出其父母的margin-top

我想在父div内移动它，我该怎么做？

的CSS：

html, body 
{ 
    width:100%; 
    height:100%; 
    margin:0px; 
} 
.heading 
{ 
    width:100%; 
    height:20%; 
    background-color:green; 
} 
.content 
{ 
    width:100%; 
    height:80%; 
    background-color:orange; 
} 
.menu_button_container 
{ 
    display:inline-block; 
    margin-top:30%; 
    margin-left:0%; 
    float:left; 
    width:20%; 
    height:40% 
} 
.menu_button 
{ 
    background-color:purple; 
    border:none; 
    width:100%; 
    height:100%; 
    font: 14px; 
    color:white; 
} 
.center_text 
{ 
    width:80%; 
    height:100%; 
    background-color:blue; 
    margin-left: 10% 
}

HTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>template 1</title> 
    <link rel="stylesheet" type="text/css" href="project.css"> 
</head> 
<body> 
    <div class="heading"> 

     <div class="menu_button_container" style="margin-left: 10%"> 
     <button class="menu_button">Home</button> 
     </div> 

     <div class="menu_button_container"> 
     <button class="menu_button">Link</button> 
     </div> 

     <div class="menu_button_container"> 
     <button class="menu_button">Link</button> 
     </div> 

     <div class="menu_button_container"> 
     <button class="menu_button">Link</button> 
     </div> 

    </div> 

    <div class="content"> 
     <div class="center_text"></div> 
    </div> 
</body> 
</html>

我希望在这个问题上的任何帮助。

来源

2016-03-06 Mrhill65

我想这就是你想要的？

body { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    margin: 0px; 
 
} 
 

 
.heading { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20%; 
 
    background-color: green; 
 
    font-size: 0px;  
 
} 
 

 
.menu_button_container { 
 
    text-align: center; 
 
    position: absolute; 
 
    width: 80vw; 
 
    bottom: 0px; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
} 
 

 
.content { 
 
    width: 100%; 
 
    height: 80%; 
 
    background-color: orange; 
 
} 
 

 
.menu_button { 
 
    display: inline-block; 
 
    background-color: purple; 
 
    border: none; 
 
    width: 20vw; 
 
    font: 14px; 
 
    color: white; 
 
} 
 

 
.center_text { 
 
    width: 80%; 
 
    height: 100%; 
 
    background-color: blue; 
 
    margin-left: 10% 
 
}

<div class="heading"> 
 
<div class="menu_button_container"> 
 
    
 
<button class="menu_button">Home</button> 
 
<button class="menu_button">Link</button> 
 
<button class="menu_button">Link</button> 
 
<button class="menu_button">Link</button> 
 
    
 
</div> 
 
</div> 
 

 
<div class="content"> 
 
<div class="center_text"> 
 
</div> 
 
</div>

来源

2016-03-06 19:35:56

更新只是现在与'左：0;''右：0''余量：auto'上'menu_button_container'（而不是'保证金左：10％'） ; –

非常完美，谢谢。 – Mrhill65

我不知道如何停止让我的孩子div溢出其父母的margin-top

回答

相关问题