ホームページ > ウェブフロントエンド > htmlチュートリアル > html リスト パディング asymmetry_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 12:15:46
オリジナル
1335 人が閲覧しました

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


ディスカッション(解決策)への返信

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

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

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

元の投稿者に従って作成しましたが、同様の問題は発生しませんでした。 が再度ネストされている場合は、次のように 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 ボックスの位置が低くなります。 非対称の位置は、ブラウザの互換性の問題である可能性があります。

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

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

    このように

  • aaa


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

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

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

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

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

    関連ラベル:
    ソース:php.cn
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート