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

好的，想想我有你想要的东西将它添加到你的链接类。

 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的{{1}} inline-block媒体资源

inline-table

无法直接在彼此之上获得两个div

3 个答案: