サークルされたdivは、残りのliとインラインで表示されないのはなぜですか？

Question

私はカスタムウィザードを作成しています。私はちょうど私のタブに "丸いdiv"を配置しようとします。しかし、私のタブが

https://jsfiddle.net/sme79azj/

HTML醜い..私のcirdcledのdivのに対し水平されている。

<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-blockに変更display: inlineと下図のように、それはマイナーなその他の変更で動作します：「醜い」は何を意味するのかについての詳細な説明なしに

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

は、私はこのスニペットを作りました。それはあなたが探しているものであると思います...おそらく意図した結果の画像は次のようになり、私は円

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>