Largeur fixe CSS dans un span

Dans une liste non ordonnée :

<li><span></span> The lazy dog.</li>
<li><span>AND</span> The lazy cat.</li>
<li><span>OR</span> The active goldfish.</li>

L'ajout d'un attribut 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'objectif est d'aligner le texte après le span.

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

La justification du "OR&quot ; est sans importance.

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

Shaeldon
Question modifiée 19 mars 2015 в 11:27
Programmation
html css
2 novembre 2008 в 10:36
25 vues
Solution
ul {
    list-style-type: none;
    padding-left: 0px;
}

ul li span { 
    float: left;
    width: 40px;
}
<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>

Comme l'a dit Eoin, vous devez insérer un espace insécable dans vos espaces vides, mais vous ne pouvez pas attribuer de largeur à un élément en ligne, seulement un espacement/une marge, vous devez donc le rendre flottant pour pouvoir lui donner une largeur.

Pour un exemple en jsfiddle, voir http://jsfiddle.net/laurensrietveld/JZ2Lg/.

PythonDev
Réponse modifiée 4 janvier 2017 в 7:36
Commentaires (9)

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


div.f1 { float: left; width: 20px; }
div.f2 { float: left; }
div.f3 { clear: both; }


<div class="f1"></div><div class="f2">The Lazy dog</div><div class="f3"></div>
<div class="f1">AND</div><div class="f2">The Lazy cat</div><div class="f3"></div>
<div class="f1">OR</div><div class="f2">The active goldfish</div><div class="f3"></div>

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



        span.f1 { display: block; float: left; clear: left; width: 60px; }
    li { list-style-type: none; }



<ul>
<li><span class="f1"> </span>The lazy dog.</li>
<li><span class="f1">AND</span> The lazy cat.</li>
<li><span class="f1">OR</span> The active goldfish.</li>
</ul>
Tamas Czinege
Réponse modifiée 2 novembre 2008 в 11:09
Commentaires (2)

Vous pouvez le faire en utilisant un tableau, mais ce n'est pas du pur CSS.


ul{
    text-indent: 40px;
}

li{
    list-style-type: none;
    padding: 0;
}

span{
    color: #ff0000;
    position: relative;
    left: -40px;
}


<ul>
<span></span><li>The lazy dog.</li>
<span>AND</span><li>The lazy cat.</li>
<span>OR</span><li>The active goldfish.</li>
</ul>

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

Commentaires (0)