为什么我的圈div不与li的其余部分行内?

Question

我正在创建我的自定义向导。我只是试着把一个"圈div"在我的标签。然而，我的标签是水平的，而我的圈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

一些属性只能应用于块级元素。如果您想将它们应用于inline元素，那么首先使inline元素为inline-block。

为li更改display: inline为display: inline-block，它将与以下所示的其他微小更改一起工作:

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

没有更多地解释'ugly'的含义，我制作了这个片段。希望这就是你想要的……让我知道

在li和margin:0 auto上使用display:inline-block来居中

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>