9

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

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

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

更新2：毕竟不是那么容易。我已经添加了我提出的（和使用的）解决方案。

Update3：忽略之前的答案，这是不正确的。这是该问题的简化且可测试的示例：

JSFiddle：http: //jsfiddle.net/Bfp3K/10/

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>

图片：

解决方案应该是什么样 可接受的解决方案 的： 问题是什么样的： 当前问题

4

6 回答 6

9

只需将display:inline-block;声明替换为float:left;由于您无论如何都要指定尺寸，因此您不需要inline-block. jsFiddle有效，这是一张图片。 在此处输入图像描述

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

.big {
    height:200px;
    width:300px;
    float:left;}
于 2013-06-29T01:23:24.683 回答
8

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

li div{
    vertical-align:top;

}

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

http://jsfiddle.net/dv3Mm/

于 2013-06-29T01:29:57.417 回答
2

更新（底部对齐）：

<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>
于 2013-06-28T20:44:11.973 回答
1

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

于 2013-06-28T20:31:37.880 回答
0

在问题中发布的代码中，LI 具有 display: inline，在 jsfiddle 的“更简单示例”中，它们的显示被重置为 inline-block（通过类）。inline-block 与 inline 不同，它隔离了内部的任何块级内容（如 DIV），而尝试将块级内容放入 inline 会导致 inline 元素分解为几个所谓的匿名块框。可能是这个原因？

于 2013-06-28T21:23:27.333 回答
0

解决方案 1（又快又脏）： 设置 a margin-bottom: [negative value here] orbottom: [negative value here]如果你li是相对定位的并且 div 是绝对定位的。这是假设您知道确切的值。

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

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

于 2013-06-28T20:36:57.320 回答