logo标签列表

将div与容器顶部对齐

csshtmlalignment
9
我有一个无序列表，样式设置为水平显示。其中一个li元素包含一个div元素。这个div元素使用ajax填充，但这并不重要。
这个div元素的高度比其他li元素都要大，并且默认情况下它与父容器底部对齐。
更新：这很尴尬。我在jsfiddle中编写了一个更简单的示例http://jsfiddle.net/Bfp3K/，它可以正常工作。我必须再次检查我的代码以在沙盒中获取错误。
更新2：事实并不那么简单。我已经添加了我的建议（并使用）的解决方案。
更新3：忽略之前的答案，它是不正确的。这是一个简化和可测试的问题示例：
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>

图片：

解决方案应该看起来像这样： 可接受的解决方案 问题看起来像这样： 当前问题

3
你能贴一些你现在的HTML和CSS代码吗？ - LazerSharks
没有代码，我无法帮助... - Terry
不错。你总是可以回答自己的问题哈哈。 - LazerSharks
6个回答
9
只需用 float:left; 替换display:inline-block;声明。由于您已经指定了尺寸，因此不需要使用inline-block。这个jsFiddle可以正常工作，这里是一张图片。 enter image description here 
.normal {
    height:100px;
    width:200px;
    float:left;}

.big {
    height:200px;
    width:300px;
    float:left;}
2
虽然这在 jsfiddle 中解决了问题，但在我的项目中，大多数 div 都是动态的，没有特定的尺寸。 - GCon
如果你从 jsFiddle 中移除了特定的尺寸，你仍然会得到相同的结果：所有顶部对齐。另外，当你提问时，包括每个相关方面可以更好地帮助回答问题。 - frenchie
嗨！感谢您的时间 :) 我之前有一个复杂的代码，基于我使用的代码。我无法发布代码，因为它是Tomcat Web应用程序的一部分。您能否评论一下使用vertical-align:top而不是float:left的用法？它似乎可以工作，但我担心添加代码可能会产生副作用。（显然我刚开始进行Web开发） - GCon
请检查我发布答案中的 fiddle。 此外，向左浮动似乎会忽略我为 li 元素设置的填充和边距。 （再次感谢！） - GCon
我已经接受了@frenchie的建议，根据他的建议，vertical-align:top用于表格而不是div元素，使得后者不符合标准。 - GCon
显示剩余6条评论
9
这个解决方案其实非常简单。基于另一个答案：
li div{
    vertical-align:top;

}

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

http://jsfiddle.net/dv3Mm/

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>
所有文本都将顶部对齐。 - Alex
实际上，只需将vertical-align:bottom更改为vertical-align:top即可实现。据我所知，当在非表元素上使用时，这是不好的做法。 - GCon
1

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

我首先尝试了这个，因为它是最简单的测试。当 div 只包含一个链接（登录）时，它会显示在其他项目下面。 在 jsfiddle 上创建了一个测试后，我发现默认行为正是我要找的 - 而我的一些代码破坏了这种行为。 我找不到可能导致这种情况的原因。 - GCon
我的代码是基于Tomcat的。我将尝试保存已签出和已签入版本，并上传链接。感谢您的帮助！ - GCon
0

解决方案1（快而简单）： 设置margin-bottom: [在此处输入负值]或bottom: [在此处输入负值]如果您的li相对定位且

绝对定位。这是假设你知道确切值的情况下。

解决方案2： 我假设其他元素中的文本是链接。 将上部和下部填充到这些链接（特别是<a>标签），使它们在垂直中心对齐

解决方案3（略微涉及html）： 在每个

  • 标记中放置两个
    标记。再次将您已经拥有的
    标记包装在另一个
    标记中。使用垂直居中方法（例如tabel-cell方法）垂直居中所有内部
  • 标记可能已经起作用作为外部
    包装，但我不确定。尚未测试）

    • 0
    在问题中发布的代码中，LIs 的 display 属性为 inline，在 jsfiddle 的“更简单的示例”中，它们的 display 属性被重置为 inline-block（通过类）。inline-block 与 inline 不同，它会隔离内部的任何块级内容（如 DIV），而将块级元素放入行内会导致行内元素分裂成几个所谓的匿名块框。也许这就是原因？
    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接