1

li4 つの要素すべてがli完全な 900 ピクセルのスペースを消費し、要素間にわずかなギャップを追加する方法で要素を拡張する方法。そして、なぜ今すでにギャップがあるのですか - 私は何も定義していませんか?

<html><head><title></title></head>
<style type="text/css">
#box { width: 900px; border: solid 1px black; }

#menu {
    display: block;
    position: relative;
    width: 900px;
    margin: 0;
    padding: 0;
    text-align: center;
}

#menu li {
    display: inline;
    position: relative;
    margin: 0;
    padding: 0;
}

#menu li a, #menu li a:visited {
    display: inline-block;
    position: relative;
    padding: 10px;
    background-color: yellow;
    text-decoration: none;
}

#menu li a:hover, #menu li a:active {
    background-color: green;
    text-decoration: none;
    color: white;
}

</style>
<body>

<div id="box">
    <ul id="menu">
        <li><a href="#">Mozilla Firefox &amp; Thunderbird</a></li>
        <li><a href="#">OpenOffice</a></li>
        <li><a href="#">Microsoft Office Visio</a></li>
        <li><a href="#">Apache OpenOffice 3.0.0</a></li>
    </ul>
</div>

</body>
</html>
4

1 に答える 1

1

インライン ブロックは、空白をレンダリングするという点で奇妙な動作をします。アイテム間に表示されるギャップは、コード内の改行文字です。以下のコード（またはこのフィドルhttp://jsfiddle.net/UyQEK/ ）に示すように、改行文字を削除できます。HTML をきれいに保ちたいが、この空白の削除を行う必要がない場合は、display: inline-block の代わりに float left を要素に使用し、親で clearfix を実行して高さを設定します。 

<div id="box">
    <ul id="menu">
        <li><a href="#">Mozilla Firefox &amp; Thunderbird</a></li><li><a href="#">OpenOffice</a></li><li><a href="#">Microsoft Office Visio</a></li><li><a href="#">Apache OpenOffice 3.0.0</a></li>
    </ul>
</div>

編集 質問全体に確実に回答するために確認するのを忘れるという古典的な間違いを犯しました。フィドルhttp://jsfiddle.net/UyQEK/1/を更新して、スペースを取り除くのではなく、バー全体を利用する実際の答えを示しました。ソリューションの基本は、要素をフローティングし、それぞれに 25% の幅を与え、ul 要素に clearfix を適用することでした。

今回はすべてが解決することを願っています。

于 2013-03-07T19:56:12.073 に答える