无法将两个 div 直接放在彼此之上

Question

我正在尝试将学习框直接放在带有链接的框的顶部。

<DOCTYPE!html>
<html>
<link href='https://fonts.googleapis.com/css?family=Josefin+Sans|Fredoka+One' rel='stylesheet' type='text/css'>
<link type="text/css" rel="stylesheet" href="bootstraps.css">
    <head>
        <title>Bootstrap your life</title>
    </head>
    <body>
        <div class="header">
            <div class="container"> 
                <h3>Pick yourself up by your</h3>
                <h1>bootstraps</h1>
            </div>
        </div>
        <div class="body">
            <div class="container">
                <ul class="menu">
                    <li class="earn">
                        <div class="button">    
                            <h2>Earn</h2>
                        </div>
                        <div class="links"> 
                            <a href="https://get.uber.com/drive/">Drive for Uber</a>
                            <a href="https://www.lyft.com/drivers">Drive for Lyft</a>
                            <a href="http://www.freelance.com/en/">Freelance on freelance.com</a>
                            <a href="https://www.shopify.com/">Start a Shopify Store</a>
                            <a href="https://postmates.com/apply">Deliver for Postmates</a>
                        </div>
                    </li>
                    <li class="learn">
                        <div class="button">
                            <h2>Learn</h2>
                        </div>
                        <div class="links">
                            <a href="https://www.coursera.org">Take a Coursera Course</a>
                            <a href="https://www.khanacademy.org/">Study on Khan Academy</a>
                            <a href="https://www.skillshare.com/">Learn a skill on Skillshare</a>
                            <a href="http://creativelive.com/">Get creative on Creative Live</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </body>
</html>

body {
 margin:0;
 padding:0;
}
.header {
 background-color:#663300;
 height:35%;
 font-family: 'Fredoka One', cursive;
 margin:0;
}
.header h3 {
 color:#009933;
 text-transform:uppercase;
 font-size:40px;
 text-align:center;
 padding-top:3.5%;
 margin:0;
}
.header h1 {
 color:#009933;
 text-transform:uppercase;
 font-size:90px;
 text-align:center;
 margin:0;
}
.body {
 background-color:grey;
 height:100%;
}
.body .container {
 text-align:center;
}
.body li {
 list-style:none;
}
.menu {
 margin:0;
}
.menu>li {
 display:inline-block;
}
.earn {
 margin-right:5%;
}
.learn {
 margin-left:5%;
}
.button {
 background-color:#009933;
 font-size:80px;
 font-family:'Josefin Sans', sans-serif;
 color:#663300;
}
.links a {
 display:block;
 color:#009933;
 font-size:40px;
 font-family:'Josefin Sans', sans-serif;
 text-decoration:none;
 background-color:#663300;
}

我也试过用 display:block; 将它们作为一个单独的列表，但这也没有用。真的需要一些帮助的人。谢谢

Answer 1

添加这个CSS

.button h2 {
    margin-bottom: 0px;
}

如果您在检查器中查看 h2 标签，您会发现上下边距为 99.6px

inspector view

Answer 2

好的，我想我有你要找的东西，把这个添加到你的链接中 class。

 position: relative;
 bottom: 100px;

看起来像这样。

.links a {
position: relative;
bottom: 100px;
display:block;
color:#009933;
font-size:40px;
font-family:'Josefin Sans', sans-serif;
text-decoration:none;
background-color:#663300;
}

Answer 3

请使用 menu>li display 属性从 inline-block 到 inline-table

.menu>li {
    display:inline-table;
}

无法将两个 div 直接放在彼此之上

Can't get two div's directly on top of eachother

css

position

css-position

spacing