html - 为什么下面的H3标签不 float ？

Question

以下 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> 

我试过 float <h3>标题并给它们与链接元素相同的宽度，但似乎没有任何内容 float 。 CSS 有点长，最好在 fiddle 中查看:http://jsfiddle.net/pUBuq/

我一直在 FF7 中对此进行测试，如果能帮助我找出问题所在，我将不胜感激。

Answer 1

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

jsfiddle example

要水平设置标题/链接的格式，请在 nav 元素上设置宽度(上面 js fiddle 中使用的 width:484px 适合两个菜单列表完美)

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