Отвратительное навигационное и поисковое поле не будет выравниваться

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 помогает на авось вы находитесь используя препроцессор.