html - 使 span 和 ul 在同一行

Question

我有以下 fiddle ，我想让 span 和 ul 文本垂直对齐。现在 ul 文本似乎有点向上移动，无法弄清楚这是为什么。这是相应的 html:

<div id="main">
<div class="row sort-container">
            <span class="sort-by brandon-grotesque-regular">
                Lihat berdasarkan:
            </span>
            <ul class="arvo-regular clearfix">
                <li><a class="" href="?sort=popular">Barang Terpopuler</a></li>
                <li><a class="" href="?sort=terbaru">Barang Terbaru</a></li>
            </ul>
        </div>
</div>

Answer 1

您可以在 ul 元素上将 vertical-align 设置为中间。

但是，为什么需要这么复杂的布局呢？如果每个元素都是内联的，没有 float 或内联 block 框，那就更好了。