内联块 div 元素未按预期排列[重复]答案

【问题标题】：Inline-Block div elements do not line up as expected [duplicate]内联块 div 元素未按预期排列[重复]
【发布时间】：2013-07-14 20:57:22
【问题描述】：

我有一些 HTML 和 CSS 可以创建可以在登录页面上找到的内联块元素 (div)。但是，只有当它们在 div 中包含一些内容（无序列表）时，它们才会显示为正确垂直对齐。如果 div 中没有内容，则元素被下推。这是jsfiddle。这是代码。谁能解释为什么第三个 div 块没有垂直对齐？

编辑：虽然我很满意这个问题的“修复”是确保每个 div 在样式中使用“vertical-align:top”，但我仍然有点困惑至于为什么我首先需要使用这种样式。我认为无论 div 内的内容如何，div 元素总是会均匀排列。

<html>
  <head>
<style type="text/css">
    body {
        font-family: Helvetica;
    }

    h1 {
        margin: 0px;
        padding: 10px;
        font-weight: bold;
        border-bottom: 1px solid #aaaaaa;
        font-size: 12px;
    }

    a {
        text-decoration: none;
    }

    ul {
        padding-left: 20px;
    }

    li {
        list-style-type: none;
        font-size: 12px;
    }

    .landing-block {
        display: inline-block;
        background-color: #eeeeee;
        margin-right: 30px;
        width: 192px;
        height: 140px;
        border: 1px solid #aaaaaa;
        -moz-box-shadow: 3px 3px 5px #535353;
        -webkit-box-shadow: 3px 3px 5px #535353;
        box-shadow: 3px 3px 5px #535353;
    }

    .header {
        padding: 10px;
        background-color: red;
        border-bottom: 1px solid #aaaaaa;
        color: #ffffff;
    }

    a:hover {
        text-decoration:underline; 
    }

    h1 > a {
        color: #ffffff;
    }

    h1 > a:hover { 
        color:#ffffff;
    }

    li > a {
        color: #000000;
    }

    li > a:hover { 
        color: #000000;
    }
   </style>
    </head>
    <body>
    <div>
        <div class='landing-block'>
            <h1 style='background-color: #3991db;'>
                <a href='#'>COMPANIES</a>
            </h1>
            <ul>
                <li><a href='#'>Search Companies</a></li>
                <li><a href='#'>New Company</a></li>
            <ul>
        </div>
        <div class='landing-block'>
            <h1 style='background-color: #9139db;'>
                <a href='#'>PEOPLE</a>
            </h1>
            <ul>
                <li><a href='#'>Search People</a></li>
                <li><a href='#'>New Person</a></li>
            <ul>
        </div>
        <div class='landing-block'>
            <h1 style='background-color: #c2db39;'>
                <a href='#'>Products</a>
            </h1>
        </div>
    <div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

inline-block 元素默认为vertical-align:baseline;。将此更改为vertical-align:top;

 .landing-block {
        display: inline-block;
        background-color: #eeeeee;
        margin-right: 30px;
        width: 192px;
        height: 140px;
        border: 1px solid #aaaaaa;
        -moz-box-shadow: 3px 3px 5px #535353;
        -webkit-box-shadow: 3px 3px 5px #535353;
        box-shadow: 3px 3px 5px #535353;
        vertical-align:top; /* add this rule */

    }

【讨论】：

谢谢，这很容易解决！然而，我仍然有点困惑到底是什么导致第三个街区像这样向下移动。为什么“基线”看起来是 div 内部内容的底部而不是 div 本身的底部？
@Ken 第 3 个 div 实际上在基线处，其他 2 个元素的内部两行将 div 的 2 行向上“推”

【解决方案2】：

添加垂直对齐：顶部；到 .landing-block 类

【讨论】：

【解决方案3】：

在 CSS 中为 .landing-block 类声明设置 vertical-align: top。

【讨论】：

【解决方案4】：

添加浮动：左

.landing-block {
display: inline-block;
background-color: #eeeeee;
margin-right: 30px;
width: 192px;
height: 140px;
border: 1px solid #aaaaaa;
-moz-box-shadow: 3px 3px 5px #535353;
-webkit-box-shadow: 3px 3px 5px #535353;
box-shadow: 3px 3px 5px #535353;
float: left;

}

jsfiddle

【讨论】：

如果我已经有可以放置在一行内的内联块，为什么还需要一个浮点数：left。