2

ホバーされたアイテムの上に表示される太い境界線バーで水平メニューを作成しようとしています。ただし、何らかの理由で、FirefoxとChromeのバーの右端に小さなギャップがあります。不思議なことに、IEはギャップなしでそれを表示します。Firebugは、このギャップの理由を示していません。

単純なdivを使用してみましたが、それでも表示されます。私はそれを、divのみを含む単一のHTMLサンプルにまとめました。

誰かがこれを説明し、そのギャップを取り除く方法を教えてもらえますか？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Weird border spacing</title>
    <style type="text/css">
    div.outer
    {
        border-top: dotted 1px lime;
        margin: 10px;
    }

    div.outer div
    {
        display: inline;
        margin: 0;
        padding: 0 12px;
        border-left: solid 1px silver;
        border-top: solid 3px red;
    }        
    </style>
</head>
<body>
    <div class="outer">
        <div>First</div>
        <div>Second</div>
        <div>Third</div>
    </div>
</body>
</html>
4

6 に答える 6

2

奇妙な間隔を修正する内側のdivを左にフロートさせ、内側のdivをその内側に強制する外側のdivを左にフロートさせました。ニーズに合わせてスタイルをさらに調整できます。

div.outer{border-top: 1px dotted lime;margin: 10px;float:left;}
div.outer div
{
    float:left;
    margin: 0;
    padding: 0 12px;
    border-left: 1px solid silver;
    border-top: 3px solid red;
}

div間の新しい行を削除して、スペースだけを修正することもできます。

于 2009-05-24T15:51:57.627 に答える
1

display:inlineうまく機能することはめったにありません。float:left代わりに使用することを検討してください。

于 2009-05-24T15:30:12.737 に答える
0

ギャップは、の間の改行/改行によって発生し<div>ます。これを修正するには、すべてを<div>同じ行に配置し、間にスペースを入れないでください。ただし、おそらくリストを使用して、cssを再考することをお勧めします<ul>

于 2009-05-24T15:49:46.457 に答える
0

スペースを取得する理由は、スペースをレンダリング対象として解釈するインライン要素によるものです。これにより、次のことが可能になります。

こんにちは世界

まだ2つの別々の単語があります。必要なスペースを削除するには...まあ、スペースを削除します。すでに述べたように、レイアウトのために要素をまとめて配置しようとしている場合は、float：leftを使用することをお勧めします。

于 2009-05-24T15:59:59.700 に答える
0

追加してみてください：

body {
    margin: 0;
    padding: 0;
}

ブラウザには、これらのCSSプロパティのデフォルト値が異なります。

于 2009-05-24T15:30:53.297 に答える
0

display: inline-blockセレクターの宣言はdiv.outer divあなたが望むものかもしれません。

于 2009-05-24T15:36:21.373 に答える