web-dev-qa-db-fra.com

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

Mon HTML est comme suit:

<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 blanche entre la Li apparaît. Je peux enlever le blancheur en les effondrant comme:

<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 cela est maintenu en grande partie à la main et je me demandais s'il y avait une façon plus propre de le faire.

htmlcsshtml-listsnavigation-style
34
aJanuary

Plusieurs options ici, d'abord je vous donnerai ma pratique normale lors de la création de listes intégrées:

<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 la faire fonctionner comme vous avez l'intention de:

#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é le vol stationnaire et actif, mais cela crée une bonne navigation de niveau de bloc, et constitue une méthode très courante pour le faire tout en conservant les normes./* N'oubliez pas de modifier à votre goût, ajoutez de la couleur à l'arrière-plan, et cetera * /

Si vous souhaitez le garder juste avec du texte et juste en ligne, aucun élément de blocs, je pense que vous voudriez ajouter:

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

Réalisant que vous souhaitez retirer le blanc, ajustez simplement les marges/rembourrage en conséquence.

29
thismat

Un autre moyen utile d'éliminer le blancheur est de définir la liste font-size propriété à 0 et les éléments de liste "à la taille requise.

27
Marius Schulz

Ce que vous voulez vraiment, c'est le CSS3 White-Space-Collapse: Jeter . Mais je ne sais pas si des navigateurs soutiennent réellement cette propriété.

Un couple de solutions alternatives consiste à laisser la fin de la balise d'une balise consommer le blancheur. 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 vue que j'ai vue 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 cette machine si vous allez bien utiliser des flotteurs et, en fonction des exigences dont vous pourriez avoir besoin d'ajouter une fuite <li> qui est réglé sur clear: both;.

Mais la propriété CSS3 est probablement le meilleur de manière théorique.

16
J. Holmes

Adoptez HTML et OMIT basé sur XML </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 le bloc en ligne au lieu d'en ligne.

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

Le problème est la taille de la police dans l'UL. Définissez-le sur 0 et il disparaîtra, mais vous ne voulez pas que votre texte réel soit défini si petit, puis définissez votre taille de police Li sur ce que vous voulez.

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

J'ai eu le même problème et aucune des solutions ci-dessus n'a pu le réparer. Mais j'ai découvert que cela fonctionne pour moi:

Au lieu de cela:

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

construisez votre code HTML comme celui-ci (espace blanche avant et après le texte de la liaison):

<ul id="nav">
   <li><a href="./"> Home </a></li>
   <li><a href="/About"> About </a></li>
   <li><a href="/Contact"> Contact </a></li>
</ul>
1
micha
<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>
0
user2024227