css - 讨厌的导航和搜索字段不会对齐

Question

在尝试了几乎所有事情之后，我似乎无法让导航栏和搜索字段相互对齐。

这是设置的 HTML 部分:

<header id="header">
    <h1 class="header"></h1>
    <section id="navigationWrapper">
        <nav>
            <a class="navLink" href="/home.html">Home</a>
            <a class="navLink" href="/about.html">About</a>
            <a class="navLink" href="/contact.html">Contact Us</a>
        </nav>
        <section id="searchQuery">
            <form action="/search.aspx" id method="post">
                <input type="text" id="searchQuery_field" name="search" value="search">
                <input type="submit" id="searchQuery_submit" name="searchSubmit" value="Search">
            </form>
        </section>
    </section>
</header>

补充 CSS:

/* CLASSES */
.header {color:#FFD700;}
.navLink {text-decoration:none;}

/* UNIQUE ELEMENTS */
#navigationWrapper {clear:both;}
#searchQuery form {display:inline-block;}

/* GLOBAL */
body {background-color:#f1f1f1;font-family:arial;width:100%;}
footer, header {background-color:#000000;color:#FFFFFF;left:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;margin-top:0px;padding:0px;position:fixed;right:0px;text-align:center;width:100%;}
footer {border-top:3px #FFD700 solid;bottom:0px;clear:both;} /* #FFA819 */
header {border-bottom:3px #FFD700 solid;top:0px;}

浏览器兼容性不是问题，因为已决定不支持 IE8 和更早版本。任何远程有用的建议将不胜感激。

Answer 1

你可能想做更多这样的事情

<header id="header">
    <h1 class="header"></h1>
    <nav>
        <ul>
            <li><a class="navLink" href="/home.html">Home</a></li>
            <li><a class="navLink" href="/about.html">About</a></li>
            <li><a class="navLink" href="/contact.html">Contact Us</a></li>
        </ul>
        <form action="/search.aspx" id method="post">
            <input type="text" id="searchQuery_field" name="search" value="search">
            <input type="submit" id="searchQuery_submit" name="searchSubmit" value="Search">
        </form>
    </nav>
</header>

CS

/* CLASSES */
.header {color:#FFD700;}
.navLink {text-decoration:none;}

/* UNIQUE ELEMENTS */
ul, form{float: right;}

/* GLOBAL */

body {background-color:#f1f1f1;font-family:arial;width:100%;}
footer, header {background-color:#000000;color:#FFFFFF;left:0px;margin-bottom:0px;margin-left:auto;margin-right:auto;margin-top:0px;padding:0px;position:fixed;right:0px;text-align:center;width:100%;}
footer {border-top:3px #FFD700 solid;bottom:0px;clear:both;} /* #FFA819 */
header {border-bottom:3px #FFD700 solid;top:0px;}

您对 <section> 的使用不被认为是有意义的 HTML。多用于描述页面的主要内容。

您还可以定位特定元素，例如 nav ul li a{text-decoration:none;}这样就不需要定义 class对于每个链接。