がどのように私は私のLI項目

.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>

にものを追加することができます大丈夫に見えているが、それが今の私の最初の項目を押し下げていますか？

私はカードブロックdiv内にいくつかの異なる行の情報を書きたいと思います。最初のLIがドロップダウンする理由

は、私はすぐに私はそれを挿入したり、私が持っている理由

出典

2016-04-23 kiwis

重複 - http://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements –

はここ.card & .card-block

にpositionプロパティでそれを修正だけでなく-3pxマージンを有するようにわかりませんよ私のコードです。

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

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

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

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

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

 

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

 
h2{ 
 
\t margin:0px; 
 
\t 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"> 
 
\t <div class="grad"></div> 
 
    <ul> 
 
    \t <li class="card"> 
 
     \t <div class="card-block"> 
 
      \t <h2>Location</h2> 
 
      \t </div> 
 
     </li> 
 
    \t <li class="card"> <div class="card-block"></div></li> 
 
    \t <li class="card"> <div class="card-block"></div></li> 
 
    \t <li class="card"> <div class="card-block"></div></li>  
 
    \t <li class="card"> <div class="card-block"></div></li> 
 
    \t <li class="card"> <div class="card-block"></div></li> 
 
    \t <li class="card"> <div class="card-block"></div></li> 
 
    \t <li class="card"> <div class="card-block"></div></li>           
 
    </ul> 
 
    
 
</div> 
 
</body> 
 
</html>

私もそうパディング、ボーダーをbox-sizing: border-box;をスローするようにしてみました（私は余裕を知らないのか？）他の要素の測定の邪魔にならないであろう。

出典

2016-04-23 21:37:07 ArchNoob

がどのように私は私のLI項目

答えて

関連する問題