html - <li>s 在 <ul> 内未对齐，显示为 :inline-block

Question

我是 css 的菜鸟.我有两个<li>与 display:inline-block在 ul 里面每个元素内部都有不同的元素。它们未对齐。下面给出的是我尝试过的代码。

<div class="col-md-10 pa-zero ng-scope">
<ul style="border:1px solid blue">
    <li class="breadCrumb" style="font-size: 1.000em;margin-right:5px"> 
        <span class="pa-apply-font">Raw Materials : rm- </span>

    </li>
    <li class="breadCrumb" style="font-size: 1.000em; margin-right: 5px">
        <div>
            <button style="border: none; background-color: inherit;">Formulas (3)</button>
        </div>

    </li>
</ul>

Here是说明问题的 fiddle 。

我希望它们在 ul 中的同一行中其中在我尝试过的代码中，它们在 ul 内的不同行中对齐.你能帮我解决这个问题吗。

Answer 1

inline-block 元素默认对齐 baseline。

尝试使用

vertical-align:top

JSfiddle Demo