html – Inline-Block div元素不按预期排列

发布时间：2020-12-14 21:38:55 所属栏目：资源来源：网络整理

导读：参见英文答案 Why is this inline-block element pushed downward?5个答案我有一些HTML和CSS创建一个可以在着陆页上找到的内嵌块元素(div)。但是，当它们在div中包含一些内容(无序列表)时，它们只能正确对齐。如果div中没有??内容，则该元素被按下。这是一个

参见英文答案 > Why is this inline-block element pushed downward?5个答案我有一些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>

解决方法

内嵌块元素是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 */

    }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!