Question

我正在创建自定义向导。我只是试着在我的标签中加上一个“带圆圈的div”。然而，我的标签是水平的，而我的圆圈div是......丑陋的

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，它将适用于其他次要更改，如下所示：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

没有更多解释什么＆＃39; ugly＆＃39;意思是，我做了这个片段。希望这是你在寻找...让我知道

使用display:inline-block和li上的margin:0 auto来圈定圈子

＆＃13;

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

＆＃13;

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

＆＃13;

为什么我的圆圈div与其余的li不一致？

2 个答案: