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

概述参见英文答案 > Why is this inline-block element pushed downward? 5个答案我有一些HTML和CSS创建一个可以在着陆页上找到的内嵌块元素(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 */    }

总结

以上是内存溢出为你收集整理的html – Inline-Block div元素不按预期排列全部内容，希望文章能够帮你解决html – Inline-Block div元素不按预期排列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1113092.html

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

发表评论

评论列表（0条）