列表项在底部[重复]答案

【问题标题】：List item going bottom [duplicate]列表项在底部[重复]
【发布时间】：2016-10-14 10:06:36
【问题描述】：

我有 3 个 div 以内联块的方式显示。他们每个人都有一个简单的链接列表。事情是第二个列表只有一个项目。

外观：

它应该看起来的样子：

感谢您的建议！

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

【问题讨论】：

不是重复的 rofl

标签： html css

【解决方案1】：

使用需要为display:inline-block设置vertical-align:top。

因为默认值是vertical-align:baseline。因此，您的 div 将移至底部。

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

这里是Demo Link

【讨论】：

【解决方案2】：

使用 vertical-align:top

试试这个Jsfiddle

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

【讨论】：

感谢回复！

【解决方案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

【讨论】：