對齊headermenu上的搜索和菜單欄

Question

我想弄清楚它爲什麼無法正確對齊。我嘗試過：顯示，對齊更改邊距，更改填充，更改位置。事件頂部或做一個浮動。

Photo of what it looks like

.headerMenu { 
 
    background-color: #272626; 
 
    Height: 56px; 
 
    border-bottom: 0px; 
 
    padding-left: auto; 
 
    padding-right: auto; 
 
    width: 100%; 
 
} 
 
#wrapper { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 1000px; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
} 
 
.logo { 
 
    padding-top: 9px; 
 
    padding-bottom: 9px; 
 
    width: 38px; 
 
    transition-timing-function: linear; 
 
    transition: all 2s; 
 
} 
 
.logo .img { 
 
    background-image: url(../img/logo-white-p.png); 
 
    width: 38px; 
 
    height: 38px; 
 
    transition-timing-function: linear; 
 
    transition: all 0.5s; 
 
} 
 
.logo:hover { 
 
    background-color: rgba(255, 255, 255, 1.00); 
 
} 
 
.logo .img:hover { 
 
    background-image: url(../img/logo-black-p.png); 
 
} 
 
.search_box { 
 
    position: absolute; 
 
    top: 13px; 
 
    margin-left: 155px; 
 
} 
 
#search input[type="text"] { 
 
    background: url(../img/search-icon-white.png) no-repeat 10px 6px #000; 
 
    outline: none; 
 
    border: 0 none; 
 
    font: bold 12px; 
 
    color: #fff; 
 
    width: 350px; 
 
    padding: 6px 15px 6px 35px; 
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.30); 
 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -webkit-transition: all 0.7s ease 0s; 
 
    -moz-transition: all 0.7s ease 0s; 
 
    -o-transition: all 0.7s ease 0s; 
 
    -transition: all 0.7s ease 0s; 
 
} 
 
#search input[type="text"]:focus { 
 
    background: url(../img/search-icon.png) no-repeat 10px 6px #fff; 
 
    color: #6a6f75; 
 
    width: 350px; 
 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
 
} 
 
@media screen and (max-width: 1280px) { 
 
    #menu { 
 
    postion: absolute; 
 
    top: 0px; 
 
    right0px; 
 
    height: 37px; 
 
    padding-top: 19px; 
 
    } 
 
} 
 
#menu a { 
 
    color: #000; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    padding-top: 19px; 
 
    padding-bottom: 22px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
#menu a:hover { 
 
    border-bottom: 2px solid #000000; 
 
}

<div class="headerMenu"> 
 
    <div id="wrapper"> 
 
    <div class="logo"> 
 
     <div class="img"></div> 
 
    </div> 
 
    <div class="serch_box"> 
 
     <form action="serch.php" method="get" id="search"> 
 
     <input type="text" name="q" size="60px" placeholder="Search..." /> 
 
     </form> 
 
    </div> 
 

 
    <div id="menu"> 
 
     <a href="#">Home</a> 
 
     <a href="#">About</a> 
 
     <a href="#">Login</a> 
 
     <a href="#">Register</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

你的問題在於這樣一個事實：div元素是塊元素，因此強迫自己到一個新行。

如果我們告訴系統，使在#wrapper下是一個內聯元素，那麼它將按預期排列。

它還需要vertical-align: middle才能使所有內容與標題中間對齊。如果不存在，則將其設置到標題元素的底部。

.headerMenu { 
 
    background-color: #272626; 
 
    Height: 56px; 
 
    border-bottom: 0px; 
 
    padding-left: auto; 
 
    padding-right: auto; 
 
    width: 100%; 
 
} 
 
#wrapper { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 1000px; 
 
    padding-top: 0px; 
 
    padding-bottom: 0px; 
 
} 
 
div#wrapper > div { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
.logo { 
 
    padding-top: 9px; 
 
    padding-bottom: 9px; 
 
    width: 38px; 
 
    transition-timing-function: linear; 
 
    transition: all 2s; 
 
} 
 
.logo .img { 
 
    background-image: url(../img/logo-white-p.png); 
 
    width: 38px; 
 
    height: 38px; 
 
    transition-timing-function: linear; 
 
    transition: all 0.5s; 
 
} 
 
.logo:hover { 
 
    background-color: rgba(255, 255, 255, 1.00); 
 
} 
 
.logo .img:hover { 
 
    background-image: url(../img/logo-black-p.png); 
 
} 
 
.search_box { 
 
    position: absolute; 
 
    top: 13px; 
 
    margin-left: 155px; 
 
} 
 
#search input[type="text"] { 
 
    background: url(../img/search-icon-white.png) no-repeat 10px 6px #000; 
 
    outline: none; 
 
    border: 0 none; 
 
    font: bold 12px; 
 
    color: #fff; 
 
    width: 350px; 
 
    padding: 6px 15px 6px 35px; 
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.30); 
 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
 
    -webkit-transition: all 0.7s ease 0s; 
 
    -moz-transition: all 0.7s ease 0s; 
 
    -o-transition: all 0.7s ease 0s; 
 
    -transition: all 0.7s ease 0s; 
 
} 
 
#search input[type="text"]:focus { 
 
    background: url(../img/search-icon.png) no-repeat 10px 6px #fff; 
 
    color: #6a6f75; 
 
    width: 350px; 
 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    -box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; 
 
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1); 
 
} 
 
@media screen and (max-width: 1280px) { 
 
    #menu { 
 
    postion: absolute; 
 
    top: 0px; 
 
    right0px; 
 
    height: 37px; 
 
    padding-top: 19px; 
 
    } 
 
} 
 
#menu a { 
 
    color: white; 
 
    text-decoration: none; 
 
    font-size: 14px; 
 
    padding-top: 19px; 
 
    padding-bottom: 22px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 
#menu a:hover { 
 
    border-bottom: 2px solid #000000; 
 
}

<div class="headerMenu"> 
 
    <div id="wrapper"> 
 
    <div class="logo"> 
 
     <div class="img"></div> 
 
    </div> 
 
    <div class="serch_box"> 
 
     <form action="serch.php" method="get" id="search"> 
 
     <input type="text" name="q" size="60px" placeholder="Search..." /> 
 
     </form> 
 
    </div> 
 

 
    <div id="menu"> 
 
     <a href="#">Home</a> 
 
     <a href="#">About</a> 
 
     <a href="#">Login</a> 
 
     <a href="#">Register</a> 
 
    </div> 
 
    </div> 
 
</div>