リスト要素のサイズを変更できません

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