Question

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

enter image description here

例如，在firebug中查看Quora的大标题，一切看起来都很棒，并且它与组件有很好的对称关系： enter image description here

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

我的问：

如何修复它，以便每个组件都能很好地结合在一起？
form_wrapper中的问题是什么？

Answer 1

您好我试图复制您想要暗示的内容。看一看。这是主要的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>

这是相应的CSS：

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

如何让我的标题中的组件非常合适

1 个答案: