0

nav 要素を実際にブロック要素のように動作させるのに少し問題があります。いつものulタグとliタグの代わりに、navタグとaタグでメニューを作ってみました。それは計画通りにはいきませんでした。display:block css が効果がないかのように、メニューが次々と表示されます。メニューを重ねて表示したいのですが、次々に表示されるのではありません。

HTML:

<nav id="mainmenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>
<nav id="submenu">
    <a href="#">Item1</a>
    <a href="#">Item2</a>
    <a href="#">Item3</a>
<nav>

CSS:

nav{
    display: block;
}

編集：

これは私がセットアップしたい方法ですが、インラインブロックでスペースの問題が発生しないように a 要素をフロートすることをお勧めします。

http://jsfiddle.net/Kpv5H/2/

nav要素がブロックされているときにaタグをフローティングするとすべてのaタグがインラインで表示される理由はまだわかりませんか?

http://jsfiddle.net/Kpv5H/4/

a タグを unfloat すると、それらは正しく整列しますが、a タグの上下のパディングが失われます。display:block を追加して、すべてのタグが互いに重なり合っていることを修正するとします。フロートでそれを修正しようとすると、表示をインラインのままにします。

タグのインラインブロックは修正されているようですが、代わりにスペースの問題が発生します。

nav 要素をスタックして a 要素をフロートさせ、a 要素へのパディングを保持する方法はありますか?

4

2 に答える 2

0

編集済み： * （OPによって詳細を追加した後） *

テクニックINLINE-BLOCKを使用することによって：

（要素を持つメインコンテナ）に設定したinline-block場合に使用することにより、font-size:0px;navinline-blockinline-block

デモを見る

追加font-size:0px;しないと、次のnavようになります。

デモを見る

テクニックFLOATを使用することによって：

要素がフロートしないようにoverflow:hidden、とを追加する必要があります。widthnav

以下のCSSの変更を参照してください。

nav {
    display: block;
    overflow:hidden; /* Added */
    width: 100%; /* Added */
}

nav a {
    float: left;
    padding: 2em;
}​

デモを見る

于 2012-08-02T09:25:58.400 に答える