Kann das Listenelement

Question

nicht anpassen Ich versuche, eine benutzerdefinierte width und height zum Listenelement hinzuzufügen, aber nicht dazu in der Lage.

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> 

Stil:

Unten arbeitet:

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

Keine der unten funktioniert:

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

Was mache ich falsch? Die li hat eine Hintergrundfarbe grün und es sollte wie eine 50x50 Box wie im css-Stil definiert erscheinen. Aber es funktioniert nicht.

Answer 1

müssen Sie display: inline-block; statt 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

Sie Breite oder Höhe mit einem Inline-Anzeige auf Elemente anwenden können nicht verwendet werden. Sie müssen display: block verwenden.

Wie andere vorgeschlagen haben, funktioniert display:inline-block auch, aber nicht für IE6 oder IE7.

Answer 3

Es funktioniert für mich. Schau dir das an.

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

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

.myclass ul { 
    list-style: none; 
}