html - 为什么我带圆圈的 div 与 li 的其余部分不一致？

Question

我正在创建自定义向导。我只是尝试在我的选项卡中放置一个“带圆圈的 div”。但是我的标签是水平的，而我的 cirdcled div 是..丑陋的

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

一些属性只能应用于 block 级元素。如果你想将它们应用于 inline 元素，那么首先制作 inline 元素 inline-block。

将 display: inline 更改为 display: inline-block for li 并且它会与其他较小的更改一起工作，如下所示:

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>