html - leurs - Meilleure façon de gérer les espaces entre les éléments de la liste en ligne




les balises html5 et leurs attributs pdf (6)

Mon HTML est le suivant:

<ul id="nav">
    <li><a href="./">Home</a></li>
    <li><a href="/About">About</a></li>
    <li><a href="/Contact">Contact</a></li>
</ul>

Et mon css:

#nav {
    display: inline;
}

Cependant l'espace entre les li se montre. Je peux supprimer les espaces en les écrasant comme ceci:

<ul id="nav">
    <li><a href="./">Home</a></li><li><a href="/About">About</a></li><li><a href="/Contact">Contact</a></li>
</ul>

Mais ceci est maintenu en grande partie à la main et je me demandais s'il y avait une façon plus propre de le faire.


Adoptez un code HTML non XML et omettez </li> .

<ul id="nav">
    <li><a href="./">Home</a>
    <li><a href="/About">About</a>
    <li><a href="/Contact">Contact</a>
</ul>

Définissez ensuite la propriété d'affichage des éléments sur inline-block au lieu de inline.

#nav li {
    display: inline-block;
    /display: inline; /* for IE 6 and IE 7 */
    /zoom: 1; /* for IE 6 and IE 7 */
}

Ce que vous voulez vraiment, c'est le CSS3 white-space-collapse: rejeter . Mais je ne suis pas sûr que les navigateurs supportent réellement cette propriété.

Une solution alternative consiste à laisser l'extrémité d'une étiquette consommer l'espace. Par exemple:

<ul id="nav"
    ><li><a href="./">Home</a></li
    ><li><a href="/About">About</a></li
    ><li><a href="/Contact">Contact</a></li
></ul>

Une autre chose que j'ai vu fait est d'utiliser des commentaires HTML pour consommer des espaces

<ul id="nav"><!--
    --><li><a href="./">Home</a></li><!--
    --><li><a href="/About">About</a></li><!--
    --><li><a href="/Contact">Contact</a></li><!--
--></ul>

Voir la solution de thismat si vous êtes d'accord avec les flottants, et en fonction des besoins, vous pourriez avoir besoin d'ajouter un <li> qui est mis à clear: both; .

Mais la propriété CSS3 est probablement la meilleure façon théorique.


Le problème est la taille de la police dans l'UL. Réglez-le sur 0 et il disparaîtra, mais vous ne voulez pas que votre texte soit trop petit, alors définissez votre taille de police LI comme vous le souhaitez.

<ul style="font-size:0px;">
<li style="font-size:12px;">
</ul>

Plusieurs options ici, d'abord je vais vous donner ma pratique normale lors de la création de listes en ligne:

<ul id="navigation">
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
  <li><a href="#" title="">Home</a></li>
</ul>

Ensuite, le CSS pour le faire fonctionner comme vous avez l'intention:

#navigation li 
  {
    display: inline;
    list-style: none;
  }
#navigation li a, #navigation li a:link, #navigation li a:visited
  {
    display: block;
    padding: 2px 5px 2px 5px;
    float: left;
    margin: 0 5px 0 0;
  }

Évidemment, j'ai laissé de côté les ensembles hover et active, mais cela crée une navigation agréable au niveau du bloc, et c'est une méthode très courante pour faire cela tout en respectant les standards. / * N'oubliez pas de modifier à votre goût, ajouter de la couleur à l'arrière-plan, et cetera * /

Si vous voulez le garder juste avec du texte et juste en ligne, aucun élément de bloc je crois que vous voudriez ajouter:

   margin: 0 5px 0 0; /* that's, top 0, right 5px, bottom 0, left 0 */

Réalisant que vous souhaitez supprimer les espaces, il suffit d'ajuster les marges / padding en conséquence.


Une meilleure solution pour les éléments de liste consiste à utiliser:

#nav li{float:left; width:auto;}

A exactement le même effet visuel sans le mal de tête.


<html>
<head>
<style>
ul li, ul li:before,ul li:after{display:inline;  content:' '; }
</style>
</head>
<body>
<ul><li>one</li><li>two</li><li>three</li></ul>
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>
</body>
</html>




navigation-style