CSS fixe la largeur dans un intervalle

Dans une liste non ordonnée:

  • The lazy dog.
  • AND The lazy cat.
  • OR The active goldfish.
  • L’ajout d’un atsortingbut de classe ou de style est autorisé, mais le remplissage du texte et l’ajout ou la modification de balises ne sont pas autorisés.

    La page est rendue avec Courier New.

    L’objective est de faire coïncider le texte après l’étape.

      The lazy dog. AND The lazy cat. OR The active goldfish. 

    La justification du “OU” est sans importance.

    Le texte de l’animal paresseux peut être enveloppé dans un élément supplémentaire mais je devrai vérifier.

     ul { list-style-type: none; padding-left: 0px; } ul li span { float: left; width: 40px; } 
     
    • The lazy dog.
    • AND The lazy cat.
    • OR The active goldfish.

    Dans un monde idéal, vous réaliseriez cela simplement en utilisant le css suivant

      

    Cela fonctionne sur tous les navigateurs sauf FF2 et ci-dessous.

    Firefox 2 et versions ultérieures ne supportent pas cette valeur. Vous pouvez utiliser -moz-inline-box, mais sachez que ce n’est pas la même chose qu’inline-block et que cela peut ne pas fonctionner comme prévu dans certaines situations.

    Citation prise de quirksmode

    Malheureusement, les éléments en ligne (ou les éléments affichant: inline) ignorent la propriété width. Vous devriez utiliser des divs flottants à la place:

      
    The Lazy dog
    AND
    The Lazy cat
    OR
    The active goldfish

    Maintenant, je vois que vous devez utiliser des spans et des listes, nous devons donc réécrire ceci un peu:

        
    •  The lazy dog.
    • AND The lazy cat.
    • OR The active goldfish.

    La devra être définie pour display:block car il s’agit d’un élément en ligne et ignorera la largeur.

    alors:

      

    et alors:

     
  •  something
  • ANDsomething else
  •   

    Vous pouvez faire cette méthode pour atsortingbuer une largeur aux éléments en ligne

    Dans ce cas, la scope des personnes ne peut pas être un élément de bloc, car le rest du texte entre les éléments li sera désactivé. L’utilisation de float est également une très mauvaise idée, car vous devrez définir la largeur de tout élément li et cette largeur devra être identique à la largeur de l’élément ul entier ou d’un autre conteneur.

    Essayez quelque chose comme ça en HTML:

     
  • The lazy dog.
  • AND The lazy cat.
  • OR The active goldfish.
  • et dans le css

     li {position:relative;padding-left:80px;} // 80px or something else li span {position:absolute;top:0;left:0;} li strong {color:red;} // red or else 

    Ainsi, lorsque l’élément li est relatif, vous formatez l’élément span comme étant absolu et en haut: 0, à gauche: 0; il rest donc en haut à gauche et vous définissez le padding-left (ou: padding: 0px 0px 0px 80px;) pour définir cet espace libre pour l’élément span.

    Cela devrait mieux fonctionner pour les cas simples.

    Vous pouvez le faire en utilisant une table, mais ce n’est pas du pur CSS.

      
    • The lazy dog.
    • AND
    • The lazy cat.
    • OR
    • The active goldfish.

    Notez qu’il ne s’affiche pas exactement comme vous le souhaitez, car il change de ligne pour chaque option. Cependant, j’espère que cela vous aidera à vous rapprocher de la réponse.

    Eh bien, il y a toujours la méthode de la force brute:

     
  •  The lazy dog.
  • AND The lazy cat.
  • OR The active goldfish.
  • Ou est-ce ce que vous vouliez dire en “remplissant” le texte? C’est un travail ambigu dans ce contexte.

    Cela ressemble à une question de devoirs. J’espère que tu n’essaies pas de nous faire faire tes devoirs pour toi?

    essaye ça

     >