html リスト パディング asymmetry_html/css_WEB-ITnose

リストを作成し、リストの外側のマージンと内側のマージン、および LI の内側と外側のマージンを 0PX に設定しましたが、LI のテキストは実際には垂直方向に非対称です。上部のパディングは 1PX 程度ですが、内側のマージンが 3PX と大きいので、マージンがなくなってしまうと意味がありません。 、助けてください

ディスカッション（解決策）への返信

昨年の CSS 互換性とハックに関連する記事を読むことで、答えを見つけることができます。

フロントスタイルに * {margin:0;padding:0} を追加しましたか?

私のリストとリスト要素はすべて内側と外側のマージンが 0 になるように設定されています。グローバル設定を設定するのは役に立ちません

元の投稿者に従って作成しましたが、同様の問題は発生しませんでした。 45a2772a6b6107b401db3c9b82c049c2 が再度ネストされている場合は、次のように li で位置を設定できます。ポスター用に整理しました。投稿者のお役に立てれば幸いです。

          li{                position: relative;                top: 2px;            }

あなたのリは高すぎます

方法は 3 つあります。リを低くするか、フォントを大きくするか、行の高さをリの高さと同じに設定します

あなたのリは高すぎます

方法は 3 つあります。 li を低く調整するか、フォントを大きくするか、line-height を li の高さと同じに設定してください

li の高さは、line-height の高さと同じです

コードは投稿していません~~~~

この問題はよく出ますが、解決策も非常に簡単です。あなたが欲しいのです。そして、この位置はどのブラウザとも互換性があります。上記の li の float に関しては、他のブラウザとの互換性の問題があります。つまり、ズレが生じているのです。それを解決する方法は、css ハックを使用するだけです

この問題はよく見かけます。解決策も非常に簡単です。次に、top: 0px; を使用します。左上 上の 0px は、希望の位置に応じて定義されます。そして、この位置はどのブラウザとも互換性があります。上記の li の float に関しては、他のブラウザとの互換性の問題があります。つまり、ズレが生じているのです。それを解決する方法は、css ハックを使用するだけです

この問題はよく見かけますが、解決方法も非常に簡単です。左上 上の 0px は、希望の位置に応じて定義されます。そして、この位置はどのブラウザとも互換性があります。前述の li の float に関しては、他のブラウザとの互換性の問題があります。つまり、ズレが生じているのです。じゃあどうやって解決するかというと、CSSハックを使うだけです

実際、皆さんが言っていることはわかっていますが、相対的な位置関係というのはLIの位置のことです。つまり、LIの単語が上位に対して非対称であるということです。 LI ではなく、LI ボックスの位置が低くなります。 非対称の位置は、ブラウザの互換性の問題である可能性があります。

ああ、あなたの言ったことはわかりました。 ... 例を挙げます 25edfb22a4f469ecb59f1190150159c6aaabed06894275b65c1ab86501b08a632eb

aaa の位置がうまく調整されていないということですよね

このように 25edfb22a4f469ecb59f1190150159c66ba58010a062d785f09fc9fa4b6d61a4 aaa54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb

次に、 .zi{
位置: 相対;
left://何ピクセル
トップ://何ピクセル
}
これで明確になります...

上記の方法は機能するようですが、これはなぜですか? Web サイトで、ページ上のすべてのテキストを選択すると、この現象が表示されます。 何が起こっているのでしょうか?以前にもこの問題に遭遇したことがあり、それが理由です:position:relative;。

ポイントはもらったけど… でも、その理由を伝えたい…

ポジションの理由ではないんです ご存知ですか…

言葉の浮きの理由です 何も変わりません。 FirefoxやGoogleでfloatを使用している場合…IEではfloat時にズレが生じます… ご指摘の状況です