CSS negative Text-Einzug in Listen - Kugel Probleme mit Opera

Question

Ich habe Probleme, eine Liste formatiert, wie ich in Opera. Ich mag jeden Text, der um würde wickeln, um ein wenig über die erste Zeile eingerückt werden, und ich habe diese Arbeit in Firefox/Chrome/Safari mit dem folgenden Code:

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

So ist der gesamte Absatz nach rechts verschoben wird, um 2em, und die erste Zeile wird um den gleichen Betrag nach links verschoben, was den gewünschten Effekt erzeugt: jede Zeile außer die erste eingerückt.

In Opera bewirkt dies jedoch, dass das erste Listen-Bullet nach links eingerückt wird. (Der Text wird angezeigt, wie ich es wünsche, nur die Kugel scheint falsch!) Gibt es einen anderen Weg, um zu bekommen, was ich will? (Und ist es ein Fehler in Opera? Es scheint mir, dass die Gestaltung eines Elements in der li-Element sollte keine Auswirkungen auf die Platzierung, aber ich habe nicht sehr tiefes Wissen über diese Dinge ...)

Es sah "liste-style-position", aber es ist nicht hilfreich, weil ich möchte, dass die zweite Zeile des Texts nach die erste Zeile eingerückt wird.

Danke für jede Hilfe!

Answer 1

Dies scheint in Firefox und Opera zu funktionieren. Ich habe nicht in den anderen Browsern getestet. Lass es mich wissen, wenn es für dich funktioniert.

<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:

Ich habe gerade bemerkt, dass der Text auf der rechten Seite von der Seite fließen, wenn diese mit CSS. Ich habe die CSS auf die folgende Weise modifiziert, um dies zu verhindern. Es funktioniert sowohl in Opera als auch in Firefox.

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

Und ... Ich habe das nur in Chrome überprüft. Leider funktioniert es in Chrome nicht.

Edit 2:

Ist es notwendig, die <p> zu haben? Ich kann es nicht scheinen, in allen Browsern mit dem <p> Tag zu arbeiten. Das heißt - der folgende Code für mich in Opera arbeiten, FF und Chrome (ohne <p> tag:

<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> 

Wenn Sie feststellen, dass Sie unbedingt brauchen die <p> Tag Ich denke, man bedenkt, könnte mit Conditional CSS die zwicken säumige Browser CSS individuell

Edit:

Wow ich mache eine Menge Änderungen an dieser Ordnung - so der Grund der <p> Tag wird nicht funktionieren, weil es standardmäßig ist ein Block.!. Element Blockelemente sind automat auf 100% der verfügbaren Seitenbreite eingestellt. Deshalb - beim Hinzufügen der Kugeln über list-style-position:inside; Firefox macht eine einzelne Kugel in einer Zeile, gefolgt von einem Absatz in der nächsten Zeile. Sie können dies beheben, so dass der Einzug sowohl in Firefox als auch in Chrome und Opera angezeigt wird, indem Sie den Absatz inline machen.

<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> 

In Ordnung!Ich bin fertig gute Nacht :)

Answer 2

Sie sollten reset styles verwenden, um das Problem so zu korrigieren.

Die Idee ist, eine Basislinie oder gemeinsamen Stil für Ihrer HTML-Elemente zu definieren. Auf diese Weise verhalten sie sich in allen Browsern gleich. Von dort aus können Sie jede der Grundlinien überschreiben, um sie Ihren Styling-Anforderungen anzupassen.