リスト項目が下に行く

Question

3つのdivがインラインブロックで表示されています。それぞれにはリンク付きの簡単なリストがあります。物事は2番目のリストは1つだけの項目を持っています。

の方法は、それが見えます：

それが見えるべき方法：任意のアドバイス

ありがとう！

.column_links{ 
    display: inline-block; 
    width:28%; 
    margin-right:60px; 
} 
.column_social{ 
    width:29%; 
    display: inline-block; 
    margin-right:60px; 
} 
.column_new{ 
    display: inline-block; 
} 

Answer 1

使用してみてくださいdisplay:inline-blockためvertical-align:topを設定する必要があります。

デフォルト値はvertical-align:baselineです。だから、あなたの部門は下に行く。ここで

.column_new, 
.column_social, 
.column_new{ 
    vertical-align: top; 
} 

はここDemo Link

Answer 2

使用垂直整列：トップ

このJsfiddle

.column_new, 
.column_social, 
.column_new{ 
    vertical-align: top; 
} 

Answer 3

.column_links { 
 
    display: inline-block; 
 
    width: 28%; 
 
    margin-right: 60px; 
 
} 
 
.column_social { 
 
    width: 29%; 
 
    display: inline-block; 
 
    margin-right: 60px; 
 
    vertical-align: top; 
 
} 
 
.column_new { 
 
    display: inline-block; 
 
}

<div class="column_links"> 
 
    <h3> 
 
LINKS 
 
</h3> 
 
    <hr> 
 
    <ul> 
 
    <li>list 1</li> 
 
    <li>list 2</li> 
 
    <li>list 3</li> 
 
    <li>list 4</li> 
 
    <li>list 5</li> 
 
    </ul> 
 
</div> 
 
<div class="column_social"> 
 
    <h3> 
 
FIND ME 
 
</h3> 
 
    <hr> 
 
    <ul> 
 
    <li>list 1</li> 
 
    </ul> 
 
</div> 
 
<div class="column_new"> 
 
    <h3> 
 
NEW 
 
</h3> 
 
    <hr> 
 
    <ul> 
 
    <li>list 1</li> 
 
    <li>list 2</li> 
 
    <li>list 3</li> 
 
    <li>list 4</li> 
 
    <li>list 5</li> 
 
    </ul> 
 
</div>

ですjsfiddleです：demo