Comment implémenter une largeur fixe pour les étendues dans les listes non ordonnées dans les navigateurs ?

Implémentation d'une largeur fixe dans une étendue au sein d'une liste non ordonnée

Dans le domaine de la conception Web, obtenir une largeur fixe pour une étendue au sein d'une une liste non ordonnée peut être un défi. Considérez l'extrait HTML ci-dessous :

<code class="html"><ul>
  <li><span></span> The lazy dog.</li>
  <li><span>AND</span> The lazy cat.</li>
  <li><span>OR</span> The active goldfish.</li>
</ul></code>

Le résultat souhaité est d'avoir le texte suivant chaque travée aligné verticalement, comme ceci :

<code class="text">The lazy dog.
AND The lazy cat.
OR  The active goldfish.</code>

Pour y parvenir, une approche courante consiste d'appliquer le CSS suivant :

<code class="css">span {
  display: inline-block;
  width: 50px;
}</code>

Cette solution se heurte cependant à des limitations dans certains navigateurs, à savoir Firefox 2 et antérieurs. Ces navigateurs ne reconnaissent pas la valeur du bloc en ligne. Une option alternative pour ces navigateurs consiste à utiliser -moz-inline-box. Cependant, il est important de noter qu'il ne s'agit pas d'un équivalent exact du bloc en ligne et peut présenter un comportement différent dans certains scénarios.

Pour garantir la cohérence entre tous les navigateurs, des ajustements CSS supplémentaires peuvent être nécessaires. L'une de ces solutions est la suivante :

<code class="css">@-moz-document url-prefix() {
  span {
    -moz-inline-box: true;
    width: 50px;
  }
}</code>

En employant cette approche, la largeur fixe souhaitée peut être obtenue dans les navigateurs qui ne prennent pas en charge nativement le bloc en ligne. Il est crucial de noter que l'ajout de remplissage au texte ou la modification de la structure des balises n'est pas autorisé dans ce scénario.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!