emballage Stop texte dans les listes

Question

j'ai une liste ordonnée:

<ol> 
<li>They used to bring concerns about their children or their marriages. But increasingly parishioners are also telling Glen VanderKloot, a Lutheran minister in Springfield, Ill., about their financial worries, and that puts him in the unusual position of dispensing investment advice.</li> 
<li>This is the Second g</li> 
<li>This is the Third g</li> 
<li>This is the fourth g</li> 
<li> <strong>This is the fifth g</strong> </li> 
<li>This is the seventh g</li> 
<li>This is the eight g</li> 
<li>This is the ninth g</li> 
<li>This is the tenth g</li> 
<li>This is the eleventh g</li> 
<li>This is the twelvth g</li> 
</ol> 

Il se présente comme suit:

1. They used to bring concerns about their children or their marriages. But 
    increasingly parishioners are also telling Glen VanderKloot, a Lutheran 
    minister in Springfield, Ill., about their financial worries, and that puts 
    him in the unusual position of dispensing investment advice. 
2. This is the Second g 
3. This is the Third g 
4. This is the fourth g 
5. This is the fifth g 
6. This is the seventh g 
7. This is the eight g 
8. This is the ninth g 
9. This is the tenth g 
10. This is the eleventh g 
11. This is the twelvth g 

Quand j'ai beaucoup de texte comme le premier élément, je veux que ce soit formaté comme ci-dessus. J'ai été en mesure d'accomplir cela en réglant:

list-style-position:outside; 

et d'ajuster certaines marges sur les étiquettes li et ol. Cependant, cela a eu quelques effets négatifs quand j'ai eu des chiffres doubles et triples. J'ai dû utiliser ces marges comme dans IE les numéros étaient coupés. Je voudrais pouvoir revenir à utiliser un list-style-position de inside et enlever les marges mais le texte enveloppe sous le nombre qui n'est pas ce que je veux.

Est-ce que quelqu'un sait comment désactiver cet emballage?

Answer 1

L'utilisation de list-style-position:outside; serait plus faisable si vous utilisiez une liste non ordonnée, ce qui prendrait toujours la même quantité d'espace pour le marqueur. Puisque vous utilisez une liste ordonnée, je voudrais rester avec list-style-position:inside;. Le problème, comme vous l'avez découvert, est que IE et Firefox font la même quantité d'espace pour le marqueur, quel que soit le nombre de chiffres dans le marqueur ou la taille de la police. Vous devez donc prendre les choses en main en créant l'espace vous-même. L'astuce ici est de savoir que, par défaut, IE et Firefox utilisent des propriétés différentes pour créer l'espace.IE utilise margin sur le <ol> (30 points) tandis que Firefox utilise padding (40 pixels), donc vous devrez réinitialiser ces deux valeurs pour atteindre le bonheur de votre navigateur.

Essayez ceci:

ol { 
    margin-left: 0; 
    padding-left: 3em; 
    list-style-position: outside; 
} 

Answer 2

Essayez ceci:

li { 
    white-space:nowrap; 
} 

Answer 3

li { white-space: nowrap; } 

Cela permettra le texte à afficher sur la même ligne. Cela peut également entraîner d'autres développements horizontaux. Probablement pas pertinent dans ce cas, mais il cachera tout texte au-delà de la largeur fixe de l'élément LI.

Voir aussi break-word:

li { word-wrap: break-word } 

Je pense que ce sélecteur a des problèmes dans IE cependant.

Answer 4

Le problème est que list-style-position: dans "Indente le marqueur et le texte". Donc, vous ne réaliserez jamais ce que vous essayez de faire en l'utilisant. (http://www.w3schools.com/CSS/pr_list-style-position.asp) Donc, vous êtes seulement le choix est list-style-position: à l'extérieur. Si votre problème est que certaines listes peuvent avoir jusqu'à 9 éléments (1 chiffre), d'autres ont jusqu'à 99 éléments (2 chiffres) et d'autres ont jusqu'à 999 éléments (3 chiffres), etc. Je voudrais Disons que vous avez 2 choix:

Option 1: créez une classe différente pour chaque liste (en supposant que vous connaissiez le compte à l'avance). Peut-être les appeler digits1, digits2, digits3, etc. Donc, pour les listes 1 chiffres, vous utilisez:

<ol class='digits1'> 
    <li>item</li> 
    ... 
</ol> 

Option 2: Abandonner listes tout à fait et il suffit d'utiliser les tables (je sais beurk). Mais vous garantissez un emballage et une indentation appropriés, quel que soit le nombre d'éléments dans la liste.