Question

我无法将所有（内联块）元素与其容器div的顶部对齐。

我已经在列表中尝试过这些项目，向左浮动（但不能居中）以及许多其他随机的东西，但似乎没有任何效果。

任何帮助表示赞赏！

CSS

#buttons{
    margin: 0 auto;
    padding:0px;
    border:1px dotted black;
    height:60px;
}

 .block img{

    display:inline-block;
    *display: inline;
    zoom: 1;
    height:60px;
    width:40px;
    border:0;

 } 

.block{
    display:inline-block;
    *display: inline;
    zoom: 1;
    border:1px solid red;
    height:60px;
    width:40px;
    margin:0px;
    padding:0px;
 }

 #search {
    display:inline-block;
    *display: inline;
    zoom: 1;
    height:60px;
    width:240px;
    border:1px solid red;
    margin:0px;
    padding:0px;
 }

#searchTextForm{
    font-size:16px;
    width: 185px;
    color:#333;
    margin-top:3px;
    border:1px dotted blue;
    margin-top:15px;
 }

HTML

<div id="buttons" align="center">
<div id="search" >
    <form method="get" name="tipue" action="search/results.html" target="toolbarlongTOC" title="search">
    <input type="text" id="searchTextForm" name="d" class="field" size="25" >
    </form>
</div>
<div class="block">1</div>
<div class="block">2</div>
<div class="block">3</div>
<div class="block">

    <a href="#" id="bookmarks">
        <img src="http://i.imgur.com/cbb92jF.jpg">
    </a>

    </div>
<div class="block">3</div>

Answer 1

设置.block {vertical-align: top}。完成。

http://jsfiddle.net/z3Jue/22/

Answer 2

您可以使用height并div使用line-height代替vertical-align到您的父{{1}}。请参阅此演示：http://jsfiddle.net/z3Jue/25/

内联块元素对齐问题

2 个答案: