How can I add stuff into my LI Item

Question

.container {
  max-width: 1232px;
  min-width: 200px;
  margin: 0px auto;
  font-family: Tahoma, Geneva, sans-serif;
}
.grad {
  content: "";
  display: block;
  height: 8px;
  width: 100%;
  background: linear-gradient(45deg, rgb(133, 184, 1) 0px, rgb(26, 148, 189) 77%, rgb(26, 148, 189) 100%);
  margin-bottom: 3px;
}
ul {
  padding: 0px;
  margin: 0px;
}
.card {
  list-style: none;
  background-color: rgb(36, 43, 51);
  margin: 0px;
  padding-right: 1px;
  width: 175px;
  height: 250px;
  display: inline-block;
  margin-right: -5px;
  margin-top: -3px;
  border-bottom: 1px solid rgb(88, 95, 101);
  cursor: pointer;
}
.card:hover {
  background-color: rgb(0, 0, 0);
}
.card-block {
  margin-top: 50px;
  border-right: 1px solid rgb(88, 95, 101);
  width: 100%;
  height: 150px;
}
h2 {
  margin: 0px;
  padding: 0px;
}

<div class="container">
  <div class="grad"></div>
  <ul>
    <li class="card">
      <div class="card-block">
        <h2>Location</h2>
      </div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
    <li class="card">
      <div class="card-block"></div>
    </li>
  </ul>

</div>

Before I added my Location is looked okay but it's pushed my first item down now?

I want to write several different lines of information inside my card-block div.

I'm unsure why the first LI drops down as soon as I insert it or why I have to have a -3px margin as well

duplicate - http://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements — Paulie_D, Apr 23 '16 at 21:33

score 0 · Accepted Answer · answered Apr 23 '16 at 21:37

Fixed it with position property on .card & .card-block

Here is my code.

.container{
 max-width: 1232px;
 min-width:200px;
 margin:0px auto;
 font-family:Tahoma, Geneva, sans-serif;
  box-sizing: border-box;
}

.grad{
    content: "";
    display: block;
    height: 8px;
 width:100%;
    background: linear-gradient(45deg, rgb(133, 184, 1) 0px, rgb(26, 148, 189) 77%, rgb(26, 148, 189) 100%);
 margin-bottom:3px;
}

ul{
 padding:0px;
 margin:0px;
}

.card{
    position: relative;
    box-sizing: border-box;
 list-style:none;
 background-color: rgb(36, 43, 51);
    padding-right: 1px;
 width:175px;
 height:250px;
 display:inline-block;
 margin-right:-5px;
 margin-top:-3px;
 border-bottom: 1px solid rgb(88, 95, 101);
 cursor:pointer;
}

.card:hover{
 background-color: rgb(0, 0, 0);
}


.card-block{
    box-sizing: border-box;
 position: absolute;
    left: 20px;
 border-right: 1px solid rgb(88, 95, 101);
 width:100%;
 height:100%;
}

h2{
 margin:0px;
 padding:0px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="container">
 <div class="grad"></div>
    <ul>
     <li class="card"> 
         <div class="card-block">
             <h2>Location</h2>
          </div>
        </li>
     <li class="card"> <div class="card-block"></div></li>
     <li class="card"> <div class="card-block"></div></li>
     <li class="card"> <div class="card-block"></div></li>       
     <li class="card"> <div class="card-block"></div></li>
     <li class="card"> <div class="card-block"></div></li>
     <li class="card"> <div class="card-block"></div></li>
     <li class="card"> <div class="card-block"></div></li>                                          
    </ul>
    
</div> 
</body>
</html>

I also tried to throw box-sizing: border-box; so the padding, border and (I don't know margin?) won't get in a way of other element's measurements.

How can I add stuff into my LI Item

1 Answers1