Largeur fixé dans un laps CSS

Question

Au sein d’une liste non ordonnée.

Ajout d’un attribut de style ou de la classe est autorisé mais rembourrage le texte et en ajoutant ou en modifiant des étiquettes n’est pas autorisé.

La page est rendu avec Courier New.

But est d’avoir le texte après travée alignée.

Justification de le « OR » n’est pas importante.

Le texte des animaux paresseux peut-être être encapsulé dans un élément supplémentaire, mais je vais avoir à une double vérification.

Merci est avancée !

Answer 1

Dans un monde idéal, vous devriez atteindre ceci simplement en utilisant le css suivant

Cela fonctionne sur tous les navigateurs en dehors de FF2 et en dessous.

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

Citation tirée de quirksmode

Answer 2

<pre><code></code><p>Comme Eoin dit, vous devez mettre un espace insécable en votre travées « vide », mais vous ne pouvez pas affecter une largeur à un élément en ligne, seulement rembourrage/marge de sorte que vous devrez faire flotter de sorte que vous pouvez lui donner une largeur.</p><p><a href="http://jsfiddle.net/laurensrietveld/JZ2Lg/">http://jsfiddle.net/laurensrietveld/JZ2Lg/</a></p></pre>

Answer 3

Malheureusement les éléments inline (ou des éléments ayant display : inline) ignorent la propriété width. Vous devez plutôt utiliser des divs flottants :

Maintenant, je vous vois il faut faire de portées et les listes, donc nous devons réécrire cela un petit peu :

Answer 4

La balise <span> devra être définie sur display:block car il s'agit d 'un élément en ligne et ignorera la largeur.

alors:

 <style type="text/css"> span { width: 50px; display: block; } </style>
 

et alors:

 <li><span>&nbsp;</span>something</li>
<li>span>AND</span>something else</li>
 

Answer 5

Les gens span dans ce cas ne peut pas être un élément de bloc car reste du texte entre li éléments vont baisser. Aussi à l'aide du flotteur est de très mauvaise idée, car vous aurez besoin de définir la largeur, pour tout élément li et cette largeur devra être la même que la largeur de l'ensemble de l'élément ul ou un autre récipient.

Essayez quelque chose comme cela dans le html:

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

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 format de l'élément span être absolue et au top:0;left:0; de sorte qu'il reste en haut à gauche et vous définissez le padding-left (ou: padding:0px 0px 0px 80px;) pour définir cet espace libre pour la durée de l'élément.

Il devrait mieux fonctionner pour les cas simples.