Html 将 div 与容器顶部对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17373092/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Align div with the top of a container
提问by GCon
I have an unordered list styled to display horizontally. One of the li elements contains a div element. This div element is filled using ajax, though it shouldn't matter.
我有一个样式为水平显示的无序列表。li 元素之一包含一个 div 元素。这个 div 元素是使用 ajax 填充的，尽管这无关紧要。
The div element has a larger height than the rest of the li elements, and by default it aligns with the bottom of the parent container.
div 元素的高度比其余 li 元素的高度大，默认情况下它与父容器的底部对齐。
Update: Well, isn't this awkward. I coded a simpler example in jsfiddle http://jsfiddle.net/Bfp3K/, and it works properly. I have to check my code again to get the error in the sandbox.
更新：嗯，这不是很尴尬。我在 jsfiddle http://jsfiddle.net/Bfp3K/ 中编写了一个更简单的例子，它工作正常。我必须再次检查我的代码以获取沙箱中的错误。
Update2: It wasn't that easy after all. I have added my proposed (and used) solution.
Update2：毕竟这并不容易。我已经添加了我提议的（和使用的）解决方案。
Update3: Disregard the previous answer, it wasn't correct. This is a simplified and testable example of the problem:
更新 3：忽略之前的答案，这是不正确的。这是该问题的一个简化且可测试的示例：
JSFiddle: http://jsfiddle.net/Bfp3K/10/
JSFiddle：http: //jsfiddle.net/Bfp3K/10/
CSS:
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:
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>
Images:
图片：
What the solution should look like:
What the problem looks like:
解决方案应该是什么样的：
问题是什么样的：
采纳答案by frenchie
Just replace the display:inline-block;declarations with float:left;Since you're specifying the dimensions anyway, you don't need inline-block. The jsFiddleworks and here's a pic.
只需将display:inline-block;声明替换为float:left;因为您无论如何都要指定尺寸，所以您不需要inline-block. 该的jsfiddle作品，这里是一个事先知情同意。
.normal {
height:100px;
width:200px;
float:left;}
.big {
height:200px;
width:300px;
float:left;}
回答by GCon
The solution was verysimple after all. Based on another answer:
毕竟解决方案非常简单。基于另一个答案：
li div{
vertical-align:top;
}
Since the elements have display:inline-block;, adding vertical-align:top seems to solve it. I won't mark this as the solution in case this isn't the proper solution.
由于元素有display:inline-block; ，添加 vertical-align:top 似乎可以解决它。如果这不是正确的解决方案，我不会将其标记为解决方案。
回答by 0rland
updated (bottom-aligned):
更新（底部对齐）：
<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>
回答by Half Crazed
Set the LI's line-heightto the same pixel height of the image.
将 LI 设置line-height为与图像相同的像素高度。
回答by LazerSharks
Solution 1 (quick and dirty):set a margin-bottom: [negative value here]or bottom: [negative value here]if your liare relatively positioned and the div is absolutely positioned. This is assuming that you know exact values.
解决方案1（又快又脏）：如果您的相对定位并且div绝对定位，则
设置一个margin-bottom: [negative value here]或。这是假设您知道确切的值。bottom: [negative value here]li
Solution 2:I'm assuming that the text in the other elements are links.
Set top and bottom padding to those links (specifically the <a>tags, so that they are vertically aligned in the middle)
解决方案 2：我假设其他元素中的文本是链接。为这些链接设置顶部和底部填充（特别是<a>标签，以便它们在中间垂直对齐）
Solution 3 (a bit more html):Put two divs in each li. Wrap the div you already have in another div again. Use the a vertical centering method (such as the tabel-cell method) to vertically center all the inner divs. http://www.jakpsatweb.cz/css/css-vertical-center-solution.html(The litags you already have might already work as the outer div wrap, but I'm not sure. didn't get to test that yet)
解决方案3（多一点html）：在每个li中放置两个div。再次将您已有的 div 包裹在另一个 div 中。使用垂直居中方法（例如 tabel-cell 方法）将所有内部 div 垂直居中。http://www.jakpsatweb.cz/css/css-vertical-center-solution.html（li您已经拥有的标签可能已经用作外部 div 包装，但我不确定。没有去测试然而）
回答by Ilya Streltsyn
In the code posted in the question the LIs have display: inline, and in the jsfiddle 'simpler example' their display is reset to inline-block (via classes). Inline-block is different from inline that it isolates any block-level content (like DIVs) inside, while attempting to put something block-level into inline causes the inline element to break into several so called anonymous block boxes. May be this is the reason?
在问题中发布的代码中，LI 具有 display: inline，并且在 jsfiddle 的“更简单的示例”中，它们的显示被重置为 inline-block（通过类）。Inline-block 与 inline 不同，它隔离内部的任何块级内容（如 DIV），而尝试将块级内容放入内联会导致内联元素分解为几个所谓的匿名块框。可能是这个原因？
