0

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

这是设置的 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 和更早版本。任何远程有用的建议将不胜感激。

4

2 回答 2

0

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

<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为每个链接定义一个。

于 2013-10-28T05:09:00.527 回答
0

如果你也愿意放弃 IE9，那么 flexbox让这一切变得非常简单：

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

编写所有三种语法和前缀有点痛苦，但是这个 Sass mixin有助于你已经在使用预处理器。

于 2013-10-28T05:15:44.380 回答