ここで単純な CSS の問題を抱えています —<em>そう思ったのですが…</em> — 基本的には、リスト マーカーとして生成された疑似要素を使用して、きれいに左揃えのリスト ( ul) を作成したいだけです。::beforecontent: "» "
何を試しても、このA List Apart: Taming Listsの記事の結果を再現することはできません。リンク先の例では、リストはまさに私がスタイルしたい方法です。
テキストの位置ずれの問題を示す JS Fiddle の例を再現しました: http://jsfiddle.net/jannis/f8TxN/
この点をよりよく説明するための簡単な画像もここにあります。左が ALA の例、右が私のバージョン:
ただし、Fiddle で確認できるように、内の最初の行は、liこの内の残りのテキストと単に左揃えになりませんli。
誰かが見てくれて、ここで私が間違っていることを教えてくれて本当に感謝しています。
読んでくれてありがとう
ジャニス
問題を引き起こしているのはtext-indent: -1em;です。<ul>固定値に設定すると-13px、フィドルが修正されます。
ただし、生成されたコンテンツの幅によっては、特に使用の影響を受けます。emfont-size値を引き続き使用する場合は、別の値が必要になる場合があります。pxは現在のフォントとは関係ありません。
作成者は、最初のtext-indent行を前方に押し出すコンテンツが生成されることを知っていたため、テキストが整列しているように見えるように追加されただけです。選択した値は、使用されているブラウザーとフォントに関係なく、元の記事に適合していると思います。
次の CSS (ALA の記事から) をフィドルにコピーするfont-family: Verdana, sans-serif;font-size: 11px;と、ブラウザーの配置が修正されました。
私の目には、ALA バージョンでさえ (数?) ピクセルアウトしており、完璧には程遠いですが、最初の行のテキストが残りの行よりも奥にあるという逆の問題があります。
以下を -1em から -0.85em に変更することで、あなたの例が機能するようになりました。
text-indent: -0.85em;
フォントサイズが異なっていても、これは機能しました。
使用されている文字の幅も考慮されているように見えるため、例と ALA の違いの理由は、使用されているフォントにまで及ぶ可能性があります。