0

Web サイトの水平メニューを作成しようとしています。それほど難しいことではありませんが、2 つの問題に直面しており、それが私の設計を妨げています。

私は2つの方法でそれを行うことができます:

1)。設定することにより

#menu li { 
display: inline-block;
}

私がここでやったように：http://jsfiddle.net/l0ner/HPpgG/。

それは機能し、私が望むように見えますが、各要素の間に空白があり、デザインが壊れています. すべてのリスト要素を 1 行に入れることでスペースを削除できますが、それは厳密には洗練された解決策ではありません。フォント サイズを 0 に設定して<ul>から元に戻すこと<li>ができることはわかっていますが、それはあまりにも汚いハックのように感じられるので、css の「魔法」を最小限に抑えたいと考えています。

これらのスペースを削除するにはどうすればよいですか?

2)。設定することにより

#menu li {
display: block;
float: left;
}

私がここでやったように：http://jsfiddle.net/l0ner/HPpgG/1/

しかし、このように<div>コンテナが折りたたまれ、メニューの白い背景が失われ、全体が読めなくなります。

コンテナを折りたたまないようにするにはどうすればよいですか?

4

4 に答える 4

0

最初の例では、要素間の空白は文字通り HTML の空白によって引き起こされます。タグとタグliの間の改行です。これを削除すると、空白がなくなります。</li><li>

または、2 番目の例では、親要素を引き伸ばして、浮動要素を「クリア」することができます。これを行うにはいくつかの方法がありますが (いくつかの例については Google の「clearfix」を参照)、最も簡単な方法はoverflow: hidden親要素で使用することです。

于 2013-03-11T13:24:33.833 に答える
0

これが作業中のjsfiddleです

#menu ul {
    margin: 0;
    padding: 0;
    overflow:auto;
}
#menu li {
    float: left;
    list-style:none;
}

ultoautoまたはのオーバーフローを設定する必要がありますhidden

于 2013-03-11T13:23:28.323 に答える
0

非表示の「オーバーフロー」を作成するだけ<div>です。

#menu {
    background: #fff;
    color: #000;
    overflow:hidden;
}

ここをいじった

于 2013-03-11T13:28:34.557 に答える
0

疑似要素を使用して、<ul>追加のマークアップなしで clearfix を実行できます

jsフィドル

#menu ul:after {
    clear:both;
    content:"";
    display:block;
}
于 2013-03-11T13:29:00.097 に答える