内联-块div元素不会按预期排列
内联-块div元素不会按预期排列
提问于 2013-07-16 23:19:33
我有一些HTML和CSS创建内嵌块元素(Div)，一个人可能会发现在一个登陆页面。但是，只有当它们在div中包含一些内容(无序列表)时，它们才看起来是正确的垂直对齐。如果div中没有内容，元素将被下推。这是一个jsfiddle。下面是代码。有人能解释一下为什么第三个div块没有垂直对齐吗？
垂直对齐编辑:虽然我很满意这个问题的“解决办法”是确保每个div在样式中使用“-align：”，但我仍然有点困惑，为什么我一开始就需要使用这种样式。我认为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>回答 4
Stack Overflow用户
发布于 2013-07-16 23:22:23
默认情况下，内联块元素是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 */
}Stack Overflow用户
发布于 2013-07-16 23:21:51
将vertical-align:top；添加到.landing-block类
Stack Overflow用户
发布于 2013-07-16 23:32:32
在CSS中为.landing-block类声明设置vertical-align: top。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17680595
复制相关文章
相似问题