JohnDoe22366 JohnDoe22366 - 4 months ago 9
HTML Question

Why are my circled div not inline with the rest of li?

I am creating my custom wizard. I just try to put a "circled div" in my tabs. However my tabs are horizontal whereas my cirdcled div are.. ugly

https://jsfiddle.net/sme79azj/

html:

<ul>
<li>
<a><div class="wizard-steps-number">
<span class="number">1</span>
</div>Step number 1</a>
</li>
<li>
<a><div class="wizard-steps-number">2</div>Step number 2</a></li>
</ul>


Css

ul{
list-style: none;
padding: 0px; }
li {
border: solid 1px lightgrey;
cursor: default;
color:black;
display: inline;
height:82px;
font-size: 12px;
margin: 0px;
opacity: 0.5;
padding-top: 15px;
padding-bottom: 15px;
padding-left: 25px;
padding-right: 25px;

}
.wizard-steps-number {
border-radius:1em;
border:solid 1px grey;
height:2em;
font-size:2em;
line-height:2em;
text-align:center;
color:black;
white-space: nowrap;
width:2em;}

Answer

Some properties can be applied to only block level elements. If you wants to apply them to inline elements then first make inline elements inline-block.

Change display: inline to display: inline-block for li and it will work with minor other changes as shown below:

ul{
  list-style: none;
  padding: 0px;

}
ul li {
  border: solid 1px lightgrey;
  cursor: default;
  color:black;
  display: inline-block;
  height:82px;
  font-size: 12px;
  margin: 0px;
  opacity: 0.5;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 25px;
  padding-right: 25px;
  vertical-align: top;
}

.wizard-steps-number {    
  border-radius:1em;
  border:solid 1px grey;
  height:2em;
  margin: 0 auto;
  font-size:2em;

  line-height:2em;
  text-align:center;

  color:black;
  white-space: nowrap;
  width:2em;

}
<h1>
  My wizard doesn't have circle inline... :-(
</h1>

<ul>
  <li><a><div class="wizard-steps-number"><span class="number">1</span></div>Step number 1</a></li>
  <li><a><div class="wizard-steps-number">2</div>Step number 2</a></li>

</ul>