无法调整列表元素的大小

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>

Answer 2

您无法对具有内联显示的项目应用宽度或高度。您必须使用display: block。

正如其他人所建议的那样，display:inline-block也适用于IE6或IE7。

Answer 3

它对我有用。看看这个。

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

.myclass ul li:first-child {
    margin-bottom: 5px;
}

.myclass ul {
    list-style: none;
}