html - 无法调整列表元素的大小

Question

我正在尝试将自定义 width 和 height 添加到列表元素，但无法这样做。

HTML :

<div class="myclass">
    <ul>
        <li style="background-color:green;"><span class="myspanclass">0</span></li>
        <li class="liclass" style="background-color:green;">0</li>
    </ul>
</div>

风格:

以下作品:

.myclass ul {list-style-type:none; padding: 0px;}
.myclass li {display: inline; margin-right: 10px;}

以下均无效:

.myclass ul li {width:50px; height:50px;}
.myclass li {width:50px; height:50px;}
.liclass {width:50px; height:50px;}
.myspanclass {width:50px; height:50px;}

我做错了什么？ li 的背景颜色为绿色，它应该显示为 css 样式中定义的 50x50 框。但它不起作用。

Answer 1

您需要使用 display: inline-block; 而不是 display: inline;

.myclass ul {
  list-style-type: none;
  padding: 0px;
}

.myclass li {
  display: inline-block;
  margin-right: 10px;
  width: 50px;
  height: 50px;
}

<div class="myclass">
  <ul>
    <li style="background-color:green;"><span class="myspanclass">0</span></li>
    <li class="liclass" style="background-color:green;">0</li>
  </ul>
</div>