html - 移动每个其他对象的内联图片的边距

Question

我有以下代码。所有元素都应该在我的标题中的同一行中，所以我将它们全部放在行内 block 中。
现在由于图片的高度，它们都向下移动了一点。
如果我用边距或填充将图片向下移动一点，整条线都会向下移动。

将所有内容保持在一条直线上并使图片的中心内联而不是像现在这样位于底部的最佳方法是什么？

 <header>
        <div id="headerBox">
            <h1>hi</h1>
            <p>hello<span>/</span>  Pw <span>(ID123)</span></p>
            <img src="plus.png" id="plus" />
            <span id="kunden">Kunden/Projekt anlegen</span>
            <input type="text" />
            <img src="girl.png" id="girl">
                <div  id="navArrows">
                    <ul>
                        <li><a href="#">Projektübersicht</a></li>
                        <li><a href="#">Konfigurieren</a></li>
                        <li><a href="#">Ergebnisse</a></li>
                        <li><a href="#">Landingpage</a></li>
                        <li><a href="#">Prüfen</a></li>
                    </ul>
                </div>



        </div>
    </header>

Answer 1

要实现这种布局，可以使用无序列表，并将每个元素的 CSS 显示属性设置为内联 block 。

<ul class="box">
    <li>
        <a href="#">
            <img src="plus.png">
            <h4>Your text</h4>
            <p>Your text</p>
        </a>
    </li>
    <li>
        <a href="#">
            <img src="girl.png">
            <h4>Your text</h4>
            <p>Your text</p>
        </a>
    </li><!-- more list items -->
</ul>

当元素有不同的高度时，你会看到一些奇怪的堆叠问题。 (第二个元素可能更高或更短。第五个元素捕获它的漂浮物。)

我给每个列表项一个宽度，而不是 float ，并将显示从 block 更改为内联 block 。

ul.box li {
    width: 200px;
    display: inline-block;
}

有关此样式的更多信息，本教程可能会有所帮助:

http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view

希望这对您有所帮助!