Comment afficher une liste HTML

Question

Hai, je dois montrer comme ça en HTML Il devrait être dans 2 format colonne

.Apple .Mango 
.Orange .Banana 
.Grapes 

Peut-on poster quelques exemples de code ou url Merci à l'avance

Answer 1

Vous pouvez essayer quelque chose comme

<div style="float:left"> 
<ul> 
    <li>List</li> 
    <li>one</li> 
</ul> 
</div> 
<div style="float:left"> 
<ul> 
    <li>List</li> 
    <li>two</li> 
</ul> 
</div> 

Veuillez noter qu'il est fortement déconseillé d'utiliser des tableaux pour formater votre page Web. (C'est la raison pour laquelle je removad cette section) Il est vraiment préférable d'utiliser <div> et <span>

Answer 2

Jetez un coup d'oeil ici ...

http://www.w3.org/TR/html401/struct/lists.html

Answer 3

Ajouter à votre feuille de style:

li { 
    width: 50%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
    float: left; 
} 

Vous aurez probablement envie de modifier, mais qui fait un point de départ raisonnable .

Answer 4

Il y a deux façons de le faire correctement. Le code HTML restera le même dans les deux cas:

<ul class="two-col"> 
    <li>Apple</li> 
    <li>Mango</li> 
    <li>Orange</li> 
    <li>Banana</li> 
</ul> 

Maintenant pour le CSS. Tout d'abord, vous pouvez utiliser float s:

.two-col { 
    overflow: hidden; 
} 

.two-col li { 
    width: 130px; /* Change this to any amount you want */ 
    margin-right: 10px; 
    float: left; 
} 

Ou vous pouvez utiliser la nouvelle propriété de colonne CSS3 (note ce ne sont pas pris en charge sur IE8 et ci-dessous):

.two-col { 
    column-count: 2; 
    -moz-column-count: 2; 
    -webkit-column-count: 2; 
} 

Cela donnera automatiquement à chaque la moitié de la colonne de leur largeur d'origine. Fiddle around with it ici: http://www.jsfiddle.net/4jLK7/