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。

Answer 2

如果您也愿意放弃IE9，flexbox会生成hilariously easy：

#navigationWrapper {
    clear: both;
    display: flex;
}
#navigationWrapper > nav {
    flex: 1;
    text-align: center;
}

编写所有三种语法和前缀都是一种痛苦，但this Sass mixin有助于您已经使用预处理器的机会。

讨厌的导航和搜索字段将不对齐

2 个答案: