0

以下 JS Fiddle 演示了我的问题：http: //jsfiddle.net/pUBuq/

将鼠标悬停在菜单上时，我希望菜单显示如下：

Header A    Header B
--------    ---------
Link 1A     Link 1B
Link 2A     Link 2B

相反，它显示如下：

Header A
Header B
Link 1A
Link 2A
Link 1B
Link 2B

这是标记：

<ul id="site-nav">  
    <li>
        <a class="menu" href="#">Menu 1</a>
        <div class="site-nav-menu">
            <nav>
                <h3>Header A</h3>
                <h3>Header B</h3>
                <ul>
                    <li><a href="#">Link 1a</a></li>
                    <li><a href="#">Link 2a</a></li>
                </ul>
                <ul>
                    <li><a href="#">Link 1b</a></li>
                    <li><a href="#">Link 2b</a></li>
                </ul>
            </nav>
        </div>
    </li>  
</ul>

我试图浮动<h3>标题并赋予它们与链接元素相同的宽度，但似乎没有任何东西浮动。CSS 有点长，可能最好在小提琴中查看：http: //jsfiddle.net/pUBuq/

我一直在 FF7 中对此进行测试，非常感谢任何帮助找出我哪里出错的帮助。

4

2 回答 2

1

如果只是阅读标记（例如搜索爬虫如何查看网站），则将 s 放在 s 中会更清晰h3一些。ul

jsfiddle 示例

设置相邻的标题/链接水平设置nav元素的宽度（width:484px在上面的 js fiddle 中使用的完全适合两个菜单列表）

在您的示例中，aandh3设置为，220px但导航具​​有自动宽度，并且它的父 div 是绝对定位的（这意味着除非设置了宽度，否则它只会与其内容一样宽）。

于 2012-12-17T21:30:42.027 回答
1

你的<h3>元素太宽了。

如果您将其中一个父元素的宽度设置为大约 550 像素（220 + 220 + 我认为是我没有碰巧看到的边距/填充），或者使<h3>s 明显更小（我刚刚剪掉了一个你设置的宽度中的数字，只是为了看看），你会发现它们确实如此，实际上是浮动的。

请记住，当浮动事物时，子宽度 + 边距 + 填充 + 子边框必须小于或等于父元素才能使事物出现在同一行上。

于 2012-12-17T21:33:55.967 回答