html - 标题中的标签栏右对齐。支持所有浏览器问题

Question

我想在这里得到类似的东西

我是这样写的 HTML:

            <header>
            <div id="logo">

                <form id="login" action="/login" method="post">
                    <div>
                        <label>
                            Login: <input type="text" name="username" value="">
                        </label>

                        <label>
                            Password: <input type="password" name="password" value="">
                        </label>
                        <input type="submit" name="login" value="Log In">
                    </div>
                </form>

                <nav>

                    <ul>
                        <li class="active">
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/page_1">Some link</a>
                        </li>
                        <li>

                            <a href="/page_2">Some link</a>
                        </li>
                    </ul>
                </nav>  
            </div>          
            <div id="under_menu">
                <nav>

                    Location:
                    <ul>

                        <li>

                            <a href="/">Home</a>

                        </li>

                    </ul>
                </nav>
                <form id="search" action="/search" method="post" onsubmit="this.form.submit();">
                    <div>

                        <input type="text" name="search_query" value="Search">
                    </div>
                </form>
            </div>
        </header>

和 CSS:

#logo {
    background:#fff url('./gfx/logo.png') no-repeat;
    overflow:hidden;
}

#login {
    color:#999;
    float:right;
    font-size:0.9em;
    padding-top:5px;
}

#logo nav {
    clear:both;
    float:right;
    padding-top:30px;
}

#search {
    float:right;
    padding:4px 0;
}

#logo nav ul {
    list-style:none;
    padding:8px 0;
}

#logo nav li {
    color:#444;
    cursor:pointer;
    display:inline;
    font-size:1.2em;
}

#logo nav li a {
    color:#777;
    padding:9px 12px;
}

#logo nav .active a {
    background:#1181ce;
    color:#fff;
}

#logo nav li:hover a {
    color:#1181ce;
}

#logo nav .active a:hover {
    color:#fff;
}

#under_menu {
    background:#f0f0f0;
    border-top:2px solid #1181ce;
    height:100%;
    overflow:hidden;
    padding:0 9px;
}

#under_menu nav {
    float:left;
    padding:8px 0;
}

#under_menu nav ul { display: inline; list-style: none; }
#under_menu nav li { display: inline; }

使用这些代码，它在浏览器中看起来像:

火狐:

谷歌浏览器:

我已经尝试修复它好几天了，但我还没有任何想法。你怎么看待这个问题？

Answer 1

嗯，它在 firefox 中对我来说空间很小，但只有当我的窗口处于特定尺寸时...无论如何，如果我更改 #logo nav ul { padding: 8px 0; } 而不是 #logo nav ul { padding: 9px 0; } 它似乎在 firefox 和 chorme 中都修复了它。 http://jsfiddle.net/cr9Rg/