This question already has an answer here:
CSS: unexpected vertical position of “inline-block” elements
（1个答案）
5年前关闭。
我有3个内联div，有固定的宽度和高度。它们看起来很棒，然后我在其中一个div中添加内容，突然之间，它们在Chrome和Safari中不再排成一行。（他们也从来没有在IE6&7中排队，我也很想理解这一点。）
（1个答案）
5年前关闭。
我有3个内联div，有固定的宽度和高度。它们看起来很棒，然后我在其中一个div中添加内容，突然之间，它们在Chrome和Safari中不再排成一行。（他们也从来没有在IE6&7中排队，我也很想理解这一点。）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>What is going on?</title>
<style type="text/css">
.actionBox
{
width: 295px;
height: 215px;
margin: 0 5px 5px 0;
display: inline-block;
background-color: #BBB;
}
</style>
</head>
<body>
<div class='actionBox'>
*** TAKE THIS LIKE OF TEXT OUT AND THEY WILL ALL LINE UP AGAIN ***
</div>
<div class='actionBox'>
</div>
<div class='actionBox'>
</div>
</body>
</html>
最佳答案
您需要添加vertical-align。默认值为baseline，这将导致文本底部与基线对齐。尝试top或bottom应该可以正常工作。
http://jsfiddle.net/aXesS/
在小提琴中，前3个直接是你的代码。请注意，每个框中文本的底部都是对齐的。第二个3是vertical-align:top。注意他们都排得很整齐。
09-15 12:56