Невозможно получить два div прямо на вершине eachother

Я пытаюсь поместить ящик заработка и обучения непосредственно на боксы со ссылками. Невозможно получить два div прямо на вершине eachother

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

Я также попытался сделать их отдельный список с дисплеем: блок ;, но это не сработало. На самом деле нужна помощь парням. Благодаря

источник

2015-10-28 Caed Budris

Пожалуйста, предоставьте jsfiddle – Alex

Добавить CSS

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

При просмотре h2 тег в инспекторе вы увидите, что верхний и нижний края являются 99.6px

inspector view

источник

2015-10-28 02:57:22

Это было его! Спасибо чувак. Как это произошло? –

ОК, думаю, у меня есть что вы ищете, добавьте это в свои ссылки в класс.

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; 
}

источник

2015-10-28 03:04:56 kfreeman04208

Пожалуйста, используйте menu>lidisplay свойство от inline-block к inline-table

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

источник

2015-10-28 06:43:15

Невозможно получить два div прямо на вершине eachother

ответ

Смежные вопросы