Question

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

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

 <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显示属性设置为内联块。

<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>

当物品的高度不同时，您会看到一些奇怪的堆叠问题。（第二项可能更高或更短。使用第五项抓住的浮子。）

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

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

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

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

希望这有帮助！

Answer 2

我的问题的解决方案是css属性

vertical-align: text-top;

在图片上。

更多相关信息http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

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

2 个答案: