0
検索フォームとナビゲーションメニューでヘッダーをデザインしようとしています。しかし、コンポーネントがうまく一緒に収まるわけではなく、デザインの対称性は間違っています。例えばヘッダーのコンポーネントを一緒にフィットさせるにはどうすればいいですか？
放火犯でQuoraの偉大なヘッダを見て、すべてが偉大に見える、それはのための素晴らしいsymmertyコンポーネントであるがあります。ここでは 
は私のHTMLです：
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<header id="layout_header">
<div id="header_contents">
<nav class="nav_list">
<ul>
<li><%= link_to "Home", '#' %></li>
<li><%= link_to "Profil", '#' %></li>
<li><%= link_to "Sign out", '#' %></li>
</ul>
</nav>
<form class="form_wrapper">
<input type="text" id="search" placeholder="Search" required>
</form>
</div>
</header>
<%= yield %>
</body>
</html>
私のCSSは次のとおりです。
/* The layout of the header*/
#layout_header {
float: left;
width: 100%;
background-attachment: scroll;
background-color: #F5F5F5;
border-bottom-color: #E5E5E5;
border-bottom-style: solid;
border-bottom-width: 1px;
background-image: none;
min-height: 31px;
padding-bottom: 5px;
padding-left: 0;
padding-right: 0;
padding-top: 5px;
margin:0;
}
/* Header content */
#header_contents{
position: relative;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
margin-top: 0;
padding-bottom: 0;
padding-left: 60px;
padding-right: 10px;
padding-top: 0;
width: 870px;
}
/* Navigation */
.nav_list{
float: right;
}
.nav_list ul{
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
.nav_list ul li{
margin-bottom: 0;
margin-left: 15px;
margin-right: 0;
margin-top: 8px;
float: left;
}
.nav_list ul li a{
font-weight: bold;
color: #222222;
cursor: pointer;
text-decoration: none;
}
.nav_list ul li a:hover{
font-weight: bold;
color:#fff;
text-decoration: underline;
}
/* search form*/
.form_wrapper{
width: 485px;
float: left;
overflow: hidden;
background-color: transparent;
}
.form_wrapper #search{
width: 463px;
height: 18px;
padding-right: 5px;
float: left;
border: 1px solid #CCC;
font-size: 16px;
background-color: #FFFFFF;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 3px;
padding-left: 5px;
padding-right: 1px;
padding-top: 3px;
}
.form-wrapper #search::-webkit-input-placeholder{
color: #999;
font-weight: normal;
font-size: 16px;
}
.form-wrapper #search:-moz-placeholder {
color: #999;
font-weight: normal;
font-size: 16px;
}
.form-wrapper #search:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-size: 16px;
}
マイQ：
は、私はそれを修正するにはどうすればよいので、すべてのコンポーネントは、一緒に素晴らしいフィット？
form_wrapperに問題がありますか？
あなたはその後、スタック取引所のヘッダをどう思いますか？ :) – BoltClock
スタック交換のヘッダーが素晴らしいです、symmertyはすばらしいです=） – SHUMAcupcake
あなたの検索フィールドは少し長いようです...少しsmalerかもしれません...そしてほとんどの検索ウェブサイト上の領域は右側に配置されています。 –