爲什麼我的圓形div與李的其餘部分不一致？

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

可以應用於僅塊級元素的一些性質。如果您想將它們應用到inline元素，則首先製作inline元素inline-block。

變化display: inline到display: inline-block爲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>

Answer 2

沒有什麼「醜」意味着更多的解釋，我做了這個片段。希望這是你在找什麼？讓我知道

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