Html 如何使收割台中的部件配合良好_Html_Css

Html 如何使收割台中的部件配合良好

html css

Html 如何使收割台中的部件配合良好,html,css,Html,Css,我正在尝试设计一个带有搜索表单和导航菜单的标题。但是这些部件并不能很好地配合在一起，设计的对称性是错误的例如，看看firebug中的Quora great header，一切看起来都很好，它对is组件具有很好的对称性：这是我的HTML: <!DOCTYPE html> <head> <title>Example</title> </head> <body> <header id="layout_

我正在尝试设计一个带有搜索表单和导航菜单的标题。但是这些部件并不能很好地配合在一起，设计的对称性是错误的

例如，看看firebug中的Quora great header，一切看起来都很好，它对is组件具有很好的对称性：

这是我的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>

/* 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;
}

我的问题：

我如何修复它，使每个组件都能很好地装配在一起
问题是否在表单包装器中

嗨，我试着复制你想表达的意思。看一看。这是html的主体：

<header id="layout_header">
    <div id="header_contents">
        <nav class="nav_list">
            <form class="form_wrapper">
                <input type="text" id="search" placeholder="Search" required>
            </form>
            <ul>
                <li>
                    <a href="#">Home</a>
                </li>
                <li>
                    <a href="#">Profile</a>
                </li>
                <li>
                    <a href="#">Signout</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

那么，您觉得Stack Exchange的头怎么样？：）堆栈交换的头看起来很棒，对称性看起来很棒=）您的searh字段似乎有点长。。。也许它可以有点小。。。网站上的大部分搜索区域都在右边。我正在构建一个需要这个宽度的东西，我知道你们在说什么。

body {
    margin: 0;
}
#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: 90%;
}
/* Navigation */
/* .nav_list{
    float: right;
} */

.nav_list ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    float: right;
    margin: 0
}
.nav_list ul li {
    margin-bottom: 0;
    margin-left: 15px;
    margin-right: 0;
    margin-top: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    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: 60%;
    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;
}