为什么我圈出的div与li的其余部分不对齐？

Question

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 1

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> 

Answer 2

without more explanation about what 'ugly' means, i made this snippet. hope it is what you are looking for...let me know

use display:inline-block on the li and margin:0 auto to center the circles

 ul{ list-style: none; padding: 0px; } 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; } .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; margin:0 auto; } 

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