Question

我有一个无序列表，可以水平显示。其中一个li元素包含div元素。这个div元素是使用ajax填充的，尽管它无关紧要。

div元素的高度大于其他li元素的高度，默认情况下它与父容器的底部对齐。

更新：嗯，这不是很尴尬。我在jsfiddle http://jsfiddle.net/Bfp3K/中编写了一个更简单的例子，它可以正常工作。我必须再次检查我的代码以获取沙盒中的错误。

Update2：毕竟不是那么容易。我添加了我提出的（和使用过的）解决方案。

Update3：忽略之前的回答，这是不正确的。这是一个简单且可测试的问题示例：

CSS：

#one {
    background-color:red;
}
#two {
    background-color:green;
}
#three {
    background-color:yellow;
}
#four {
    background-color:blue;
}
.normal {
    height:100px;
    width:200px;
    display:inline-block;

}
.big {
    height:200px;
    width:300px;
    display:inline-block;
}

ul {
    display:block;
}

ul li{
    display:inline;
}

HTML：

<ul>

<li><div id="one" class="normal">One</div></li>
<li><div id="two" class="normal">Two</div></li>
<li><div id="three" class="normal">Three</div></li>
<li><div id="four" class="big">
    The last div vertically aligns to it's content's last line of text. I want to align the top of all the colored divs.

</div></li>
</ul>

图片：

解决方案应该是什么样子： Accetable solution 问题是什么样的： Current Problem

Answer 1

只需将display:inline-block;声明替换为float:left;由于您仍在指定尺寸，因此您不需要inline-block。 jsFiddle有效，这是一张照片。 enter image description here

.normal {
    height:100px;
    width:200px;
    float:left;}

.big {
    height:200px;
    width:300px;
    float:left;}

Answer 2

毕竟解决方案非常简单。基于另一个答案：

li div{
    vertical-align:top;

}

由于元素有 display：inline-block; ，添加vertical-align：top似乎可以解决它。如果这不是正确的解决方案，我不会将此标记为解决方案。

http://jsfiddle.net/dv3Mm/

Answer 3

更新（底部对齐）：

<html>
<head>
<style>
li {
    display:inline-block;
}
.item {
    vertical-align: bottom; 
}
</style>
</head>
<body>
<ul>
    <li>Text 1</li>
    <li><div class="item">Text 2<img src="some.jpg"/></div></li>
    <li>Text 3</li>
</ul>
</body>
</html>

Answer 4

将LI的line-height设置为图像的相同像素高度。

Answer 5

解决方案1（快速且肮脏）： 设置margin-bottom: [negative value here] 或bottom: [negative value here]如果您的li位置相对且div位于绝对位置。这假设您知道确切的值。

解决方案2： 我假设其他元素中的文本是链接。将顶部和底部填充设置为这些链接（特别是<a>标记，以便它们在中间垂直对齐）

解决方案3（多一点HTML）： 在每个李中放两个div。再次将你已经拥有的div包裹在另一个div中。使用垂直居中方法（例如tabel-cell方法）垂直居中所有内部div。 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html （你已经拥有的li标签可能已经作为外部div包装，但我不确定。还没有测试那个）

Answer 6

在问题中发布的代码中，LI显示：inline，以及jsfiddle＆＃39;更简单的示例＆＃39;它们的显示被重置为内联块（通过类）。内联块与内联不同，它隔离了内部的任何块级内容（如DIV），而尝试将块级内容放入内联会导致内联元素分成几个所谓的anonymous block boxes。可能是这个原因？

将div与容器顶部对齐

6 个答案: