web-dev-qa-db-fra.com

css list inline ne répertorie pas les éléments horizontalement?

Je ne sais pas pourquoi cela ne s'affiche pas correctement, la liste est censée s'afficher horizontalement? Au lieu de cela, il s'affiche verticalement!

voici mon code:

#stats li {
  display: inline;
  list-style-type: none;
  padding-right: 20px;
}
<ul id="stats">
  <li>
    <h1>53</h1>
    </a>
  </li>
  <li>
    <h1>67</h1>
    </a>
  </li>
</ul>
htmlcsshtml-listsinline
15
getaway

Vous avez oublié d'ajouter float: left propriété à votre CSS:


#stats li
{
  display: inline;
  list-style-type: none;
  padding-right: 20px;
  float: left;
}

Soit dit en passant, il vous manque l'ouverture de la balise a dans votre exemple HTML. Devrait être


<li><a href="#"><h1>53</h1></a></li>
20
Ventus

C'est parce que le h1 L'élément est un élément de niveau bloc par défaut.

Ajouter:

h1 {display: inline; }

à votre CSS et ils fonctionnent comme vous le souhaitez.

Sur une note séparée, il convient de noter qu'il ne devrait y avoir qu'un seul h1 par page, tous les autres titres, sémantiquement, sont en dessous de ce titre et sont des sous-titres, d'une sorte. Considérez-le comme un livre, le titre du livre serait le h1, les chapitres h2 etc.

Je suggère donc de changer un peu votre code HTML:

<ul id="stats">
    <li><a href="#"><span class="listHeader">53</span></a></li>
    <li><a href="#"><span class="listHeader">67</span></a></li>
</ul>

Mais cela pourrait être peut-être juste moi =)

Voici un article pour soutenir mon point de vue:

29
David Thomas

h1 balises par défaut comme display:block; de sorte que soit prioritaire.

De plus, vous avez </a> balises après la fermeture du <h1> balises, mais il n'y a pas de balises d'ouverture. Cela pourrait entraîner des problèmes dans les anciens navigateurs.

Troisièmement, quel est le but de mettre h1 balises à l'intérieur de lis? Sémantiquement, cela n'a pas de sens.

4
Jeff Rupert

Il existe plusieurs solutions: vous pouvez modifier li pour afficher: bloc en ligne; ou h1 pour afficher: en ligne; (gardez à l'esprit d'utiliser un seul h1 par site et de l'utiliser sémantiquement correct! Si vous voulez simplement styliser un mot ou une phrase qui n'est pas vraiment un h2 ou 3, utilisez alors span, em's ou strong's.

Il est également important qu'une balise en ligne ne puisse pas enfermer une balise de bloc quel que soit si vous ne développez pas pour HTML5 où vous pouvez enfermer n'importe quoi dans une balise a.

De plus, si vous le pouvez, omettez de flotter pour une chose qui peut être réalisée avec plus de compatibilité descendante

2
sternAndy

En utilisant display: inline-block comme le suggère sternAndy est probablement la bonne solution ici. Inline n'est vraiment utile que pour les éléments qui ne contiennent aucun élément imbriqué.

1
B T