CSS texte négatif-indentation dans les listes - bullet problèmes avec Opera

Question

J'ai des problèmes pour obtenir une liste formatée comme je le souhaite dans Opera. Je veux tout texte qui enroulent autour d'être en retrait un peu passé la première ligne, et j'ai ce travail dans Firefox/Chrome/Safari avec le code suivant:

<ul> 
<li><p style="text-indent: -2em; padding-left: 2em"> Long first item </p></li> 
<li> Second list item </li> 
</ul> 

Ainsi, l'ensemble du paragraphe est déplacé vers la droite par 2em, et la première ligne est décalée vers la gauche par le même montant, produisant l'effet que je veux: chaque ligne sauf le premier en retrait. Toutefois, dans Opera, la première puce de la liste est indentée vers la gauche. (Le texte est affiché comme je le souhaite, seule la balle semble incorrecte!) Y at-il un autre moyen d'obtenir ce que je veux? (Et c'est un bug dans Opera? Il me semble que le style d'un élément à l'intérieur de l'élément li ne devrait pas affecter le placement des balles, mais je ne connais pas très bien ces choses ...)

Il a regardé "list-style-position", mais ce n'est pas utile parce que je veux que la deuxième ligne de texte soit indentée passé la première ligne.

Merci pour toute aide!

Answer 1

Cela semble fonctionner dans Firefox et Opera. Je n'ai pas testé dans les autres navigateurs. Dites-moi si cela marche pour vous.

<style type="text/css"> 
     ul.mylist li p {position: relative; left: 2em; text-indent: -2em;} 
    </style> 
    <ul class="mylist"> 
     <li> 
     <p> 
      Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item 
     </p> 
     </li> 
     <li>Second list item 
     </li> 
    </ul> 

Edit:

Je viens de remarquer que le flux de texte de la page à droite lorsque vous utilisez ce css. J'ai modifié le CSS de la façon suivante pour éviter cela. Cela fonctionne à la fois dans Opera et Firefox.

ul.mylist li p {position: relative; left: 2em; text-indent: -2em; margin-right: 2em;} 

Et ... Je viens de vérifier cela dans Chrome. Malheureusement, cela ne fonctionne pas dans Chrome.

Edit 2:

Est-il nécessaire d'avoir le <p>? Je n'arrive pas à l'obtenir dans TOUS les navigateurs avec la balise <p>. Cela dit - le code suivant fonctionne pour moi dans Opera, FF et Chrome (sans l'étiquette <p>:

<style type="text/css"> 
     ul.mylist {list-style-position: inside;} 
     ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;} 
    </style> 
    <ul class="mylist"> 
     <li> 
      Long first item Long first item Long first item Long first itemLong first itemLong first item Long first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first itemLong first item Long first item Long first item Long first itemLong first itemLong first item 
     </li> 
     <li>Second list item long item long item Second list item long item long item Second list item long item long item Second list item long item long itemSecond list item long item long itemSecond list item long item long item 

     </li> 
    </ul> 

Si vous trouvez que vous avez absolument besoin de la balise <p> Je pense que vous pouvez envisager d'utiliser Conditional CSS pour modifier la offensant les navigateurs CSS individuellement

Edit:

Wow je fais beaucoup de modifications sur ce Alright - donc la raison pour laquelle l'étiquette <p> ne fonctionnera pas parce qu'il est par défaut un bloc.!. éléments de bloc sont automates réglé pour occuper 100% de la largeur de page disponible. Par conséquent - lors de l'ajout des balles via Firefox rend une balle solitaire sur une ligne suivie d'un paragraphe sur la ligne suivante. Vous pouvez corriger cela afin que le retrait apparaisse dans Firefox ainsi que Chrome et Opera en faisant le paragraphe en ligne.

<style type="text/css"> 
    ul.mylist {list-style-position: inside;} 
    ul.mylist li {text-indent: -2em; position: relative; left: 2em; margin-right: 2em;} 
    ul.mylist li p {display: inline;} 
</style> 

Très bien!Je suis fait bonne nuit :)

Answer 2

Vous devez utiliser reset styles pour corriger ce problème.

L'idée est de définir une ligne de base ou un style commun pour tous de vos éléments html. De cette façon, ils agiront de la même manière dans tous les navigateurs. De là, vous pouvez remplacer l'une des lignes de base pour répondre à vos besoins de style.