CODEWITHSUNDEEP
htmlcss
Divya MV
Divya MV

Reputation: 2053

<li>s misaligned inside <ul> with display:inline-block

I am a noob in css.I have two <li>s with display:inline-block inside a ul with different elements inside each of them.And they are misaligned.Below given is the code that i have tried .

<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 is the Fiddle illustrating the problem.

I want them in the same line inside the ul wherein in the code that i have tried they are aligned in different lines inside the ul.Can you please help me resolve this.

Upvotes: 0

Views: 550

Answers (2)

Anandh Sp
Anandh Sp

Reputation: 787

You can also try this css. Check this link https://jsfiddle.net/dgxhs573/

.col-md-10 ul li {
  float: left;
}
.col-md-10 ul {
  display: inline-block;
}

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115174

inline-block elements have a default alignment of baseline.

Try using 

vertical-align:top

JSfiddle Demo

Upvotes: 2

Related Questions