リスト内のCSSネガティブテキストインデント - Operaでの弾丸の問題

Question

私はOperaで必要なフォーマットのリストを取得できません。私は、最初の行過去のビットをインデントするためにラップアラウンドする任意のテキストをしたい、と私は次のコードでのFirefox /クローム/ Safariでこの作業を持っている：

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

だから、段落全体が右にずれています最初の行が同じ量だけ左に戻され、私が望む効果が得られます。すべての行を除いて最初の行がインデントされます。

しかし、これにより、最初のリストの箇条書きが左にインデントされます。 （テキストは私が望むように表示されますが、箇条書きだけが間違っているようです！）私が望むものを得る別の方法はありますか？ （そして、それはオペラのバグでしょうか？li要素内の要素のスタイリングは、弾丸の配置に影響しないはずですが、私はこれらのことについて深く知りません...）

"list-style-position"を調べましたが、2行目のテキストをインデントする場合は、最後の行はになります。

ありがとうございました！

Answer 1

これはFirefoxとOperaで動作するようです。私は他のブラウザではテストしていません。それがあなたのために働くかどうか私に教えてください。

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

編集：

私はこのCSSを使用したときにテキストが右にページをオフに流れることに気づきました。私はこれを防ぐために次のようにCSSを修正しました。 OperaとFirefoxの両方で動作しています。

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

さらに、Chromeでこれを確認しました。残念ながら、Chromeでは動作しません。

編集2：

は<p>を持っていることが必要ですか？私はそれが<p>タグを持つすべてのブラウザで動作するように見えることはできません。それはそうだ - 次のコードは、オペラ、FF、およびChromeで私のために働いている（<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> 

あなたは絶対に<p>タグが必要なことが判明した場合、私はあなたが微調整するConditional CSSを使用して検討するかもしれないと思います問題は個別にCSSをブラウザ

編集：

うわー、私は大丈夫、この上で編集をたくさん作ってるんだ - そう、それはデフォルトでブロックされているため<p>タグは動作しません理由はあるが。！。ブロック要素は自動化されています利用可能なページ幅の100％を占めるように設定します。したがって、list-style-position:inside;で箇条書きを追加すると、Firefoxは1行に単独の箇条書きを描画し、次の行に段落を続けます。これを修正することで、段落をインラインにして、ChromeとOperaだけでなくFirefoxでもインデントが表示されるようにすることができます。

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

いいえ！私はgoodnightをやったよ:)

Answer 2

reset stylesを使って、このような問題を修正する必要があります。

考え方は、のすべてのの基本要素または共通のスタイルを定義することです。そうすれば、彼らはすべてのブラウザで同じように行動します。そこから、あなたのスタイリングのニーズに合わせてベースラインをオーバーライドすることができます。