ロゴと検索ボックスの整列メニュー

Question

次のメニューの編集に問題があります。私は何が間違っているのか分かりません。

.page_menu_wrapper { 
 
    width:100%; 
 
    max-width:1100px; 
 
    margin:0 auto; 
 
} 
 

 
.clear { 
 
    clear:both 
 
} 
 

 
.page-menu ul li { 
 
    list-style:none; 
 
} 
 
.page-menu ul li { 
 
    display:inline-block; 
 
    background-color:green; 
 
    transition:all 400ms ease-in-out} 
 

 
.page-menu { 
 
    float:left; 
 
    width:100%; 
 
    height:auto; 
 
    padding:0!important; 
 
    margin:0 5px; 
 
    font-size:100%; 
 
    font-weight:400} 
 

 
.page-menu ul { 
 
    margin:0 auto!important; 
 
    text-align:center; 
 
    display: block; 
 
    width:100%; 
 
    padding:0!important; 
 
    line-height:3em} 
 

 
.page-menu ul li a:hover { 
 
    background: #00f; 
 
    color:#e8554e!important} 
 

 
.page-menu ul li a { 
 
    color:white!important; 
 
    padding:0 40px 0 0; 
 
    text-decoration:none; 
 
} 
 

 
.page-menu ul li a img { 
 
    vertical-align:middle!important} 
 

 
@media screen and (max-width:1000px){ 
 
.page-menu,.search-box { 
 
    width:100%; 
 
    margin:0 } 
 
    
 
.page-menu ul li { 
 
    width:33.3%; 
 
    float:left} 
 
    
 
.page-menu ul li:first-child { 
 
    width:100%; 
 
    float:none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin-top:10px} 
 
    
 
.page-menu ul li:last-child { 
 
    width:100%; 
 
    float:none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box;} 
 
    
 
.page-menu ul li { 
 
    text-align:center} 
 
    
 
.page-menu ul li a { 
 
    margin:0 auto; 
 
    padding:0} 
 

 
.page_menu_wrapper { 
 
    padding-bottom:10px} 
 
    
 
} 
 

 
@media screen and (max-width:480px){ 
 
    .page-menu ul {line-height:2em} 
 
} 
 

 
@media screen and (max-width:240px){ 
 
.page-menu ul li{width:50%} 
 
} 
 

 
.searchform { 
 
\t display: inline-block; 
 
\t zoom: 1; /* ie7 hack for display:inline-block */ 
 
\t *display: inline; 
 
\t border: solid 1px #d2d2d2; 
 
\t padding: 3px 5px;} 
 
.searchform input { 
 
\t font: normal 12px/100% Arial, Helvetica, sans-serif;} 
 

 
.searchform .searchfield { 
 
\t background: #fff; 
 
\t padding: 6px 6px 6px 8px; 
 
\t width: 202px; 
 
\t border: solid 1px #bcbbbb; 
 
\t outline: none; 
 

 
\t -webkit-border-radius: 2em; 
 
\t -moz-border-radius: 2em; 
 
\t border-radius: 2em; 
 

 
\t -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
 
\t -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
 
\t box-shadow: inset 0 1px 2px rgba(0,0,0,.2);} 
 

 
.searchform .searchbutton { 
 
\t color: #fff; 
 
\t border: solid 1px #494949; 
 
\t font-size: 11px; 
 
\t height: 27px; 
 
\t width: 27px; 
 
\t text-shadow: 0 1px 1px rgba(0,0,0,.6); 
 

 
\t -webkit-border-radius: 2em; 
 
\t -moz-border-radius: 2em; 
 
\t border-radius: 2em; 
 

 
\t background: #5f5f5f; 
 
\t background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); 
 
\t background: -moz-linear-gradient(top, #9e9e9e, #454545); 
 
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ 
 
\t -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ 
 
}

<div class="page_menu_wrapper"> 
 
<nav class='page-menu'> 
 
<ul> 
 
    <li><a href='/'><img height='70' src='http://xf.com/new/logo.png' width='171'/></a></li> 
 
    <li><a href='about.php'><span itemprop='name'>About</span></a></li> 
 
    <li><a href='contact.php'><span itemprop='name'>Contact</span></a></li> 
 
    <li><a href='privacy.php'><span itemprop='name'>Privacy</span></a></li> 
 
    <li><a href='sitemap.php'><span itemprop='name'>Sitemap</span></a></li> 
 
    <li><a href='iklan.php'><span itemprop='name'>Iklan</span></a></li> 
 
    <li><form class="searchform"> 
 
\t <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> 
 
\t <input class="searchbutton" type="button" value="Go" /> 
 
</form></li> 
 
    </ul> 
 
</nav> 
 

 
    <div class='clear'></div> 
 
</div>

ロゴが右に左と検索ボックスの上ではありません。

行の高さが同じではありません（緑色を参照）。リンクのセルの高さと幅は同じではありません。リンク上のマウスクリックの効果（青色）は、セル全体ではありません。

私は同様のメニューを見つけましたが、反応がありません。 https://jsfiddle.net/mr5Ljfm5/

以下のメニューを調整してもらえますか？

ありがとうございます。

Answer 1

フレックスボックスを使用して、アイテム間の垂直方向の整列と間隔を助けます。

.page_menu_wrapper { 
 
    width: 100%; 
 
    max-width: 1100px; 
 
} 
 

 
.page-menu { 
 
    width: 100%; 
 
    margin: 0 5px; 
 
    font-weight: 400; 
 
    background-color: green; 
 
} 
 

 
.page-menu ul { 
 
    margin: 0; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
    width: 100%; 
 
    padding: 0; 
 
} 
 

 
.page-menu ul li { 
 
    list-style: none; 
 
} 
 

 
.page-menu ul li a:hover { 
 
    background: #00f; 
 
    color: #e8554e; 
 
} 
 

 
.page-menu ul li a { 
 
    color: white; 
 
    padding: 0 40px 0 0; 
 
    text-decoration: none; 
 
} 
 

 
@media screen and (max-width:1000px) { 
 
    .page-menu, 
 
    .search-box { 
 
    width: 100%; 
 
    margin: 0 
 
    } 
 
    .page-menu ul li { 
 
    width: 33.3%; 
 
    float: left 
 
    } 
 
    .page-menu ul li:first-child { 
 
    width: 100%; 
 
    float: none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin-top: 10px 
 
    } 
 
    .page-menu ul li:last-child { 
 
    width: 100%; 
 
    float: none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    } 
 
    .page-menu ul li { 
 
    text-align: center 
 
    } 
 
    .page-menu ul li a { 
 
    margin: 0 auto; 
 
    padding: 0 
 
    } 
 
    .page_menu_wrapper { 
 
    padding-bottom: 10px 
 
    } 
 
} 
 

 
@media screen and (max-width:480px) { 
 
    .page-menu ul { 
 
    line-height: 2em 
 
    } 
 
} 
 

 
@media screen and (max-width:240px) { 
 
    .page-menu ul li { 
 
    width: 50% 
 
    } 
 
} 
 

 
.searchform { 
 
    display: inline-block; 
 
    zoom: 1; 
 
    /* ie7 hack for display:inline-block */ 
 
    *display: inline; 
 
    border: solid 1px #d2d2d2; 
 
    padding: 3px 5px; 
 
} 
 

 
.searchform input { 
 
    font: normal 12px/100% Arial, Helvetica, sans-serif; 
 
} 
 

 
.searchform .searchfield { 
 
    background: #fff; 
 
    padding: 6px 6px 6px 8px; 
 
    width: 202px; 
 
    border: solid 1px #bcbbbb; 
 
    outline: none; 
 
    -webkit-border-radius: 2em; 
 
    -moz-border-radius: 2em; 
 
    border-radius: 2em; 
 
    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 
 
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 
 
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); 
 
} 
 

 
.searchform .searchbutton { 
 
    color: #fff; 
 
    border: solid 1px #494949; 
 
    font-size: 11px; 
 
    height: 27px; 
 
    width: 27px; 
 
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6); 
 
    -webkit-border-radius: 2em; 
 
    -moz-border-radius: 2em; 
 
    border-radius: 2em; 
 
    background: #5f5f5f; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); 
 
    background: -moz-linear-gradient(top, #9e9e9e, #454545); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); 
 
    /* ie7 */ 
 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); 
 
    /* ie8 */ 
 
}

<div class="page_menu_wrapper"> 
 
    <nav class='page-menu'> 
 
    <ul> 
 
     <li> 
 
     <a href='/'><img height='70' src='http://xf.com/new/logo.png' width='171' /></a> 
 
     </li> 
 
     <li><a href='about.php'><span itemprop='name'>About</span></a></li> 
 
     <li><a href='contact.php'><span itemprop='name'>Contact</span></a></li> 
 
     <li><a href='privacy.php'><span itemprop='name'>Privacy</span></a></li> 
 
     <li><a href='sitemap.php'><span itemprop='name'>Sitemap</span></a></li> 
 
     <li><a href='iklan.php'><span itemprop='name'>Iklan</span></a></li> 
 
     <li> 
 
     <form class="searchform"> 
 
      <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> 
 
      <input class="searchbutton" type="button" value="Go" /> 
 
     </form> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

Answer 2

//add responsive class for mobile view 
 
function myFunction() { 
 
    var x = document.getElementById("mytopmenu"); 
 
    if (x.className === "topmenu") { 
 
     x.className += " responsive"; 
 
    } else { 
 
     x.className = "topmenu"; 
 
    } 
 
}

body {margin:0;} 
 

 
.topmenu { 
 
    overflow: hidden; 
 
    background-color:black; 
 
} 
 

 
.topmenu .icon { 
 
    display: none; 
 
} 
 
.topmenu a { 
 
    float: left; 
 
    display: block; 
 
    color:white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    font-size: 1rem; 
 
} 
 

 
.topmenu a:hover { 
 
    color: black; 
 
    background-color: white; 
 
} 
 

 

 
/* styles for mobile view*/ 
 

 
@media screen and (max-width: 600px) { 
 
    /*removes links except for first child*/ 
 
    .topmenu a:not(:first-child) {display: none;} 
 
    .topmenu a.icon { 
 
    float: right; 
 
    display: block; 
 
    } 
 
    .topmenu.responsive {position: relative;} 
 
    .topmenu.responsive .icon { 
 
     /*fixing top right menu icon*/ 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    } 
 
    .topmenu.responsive a { 
 
    float: none; 
 
    display: block; 
 
    text-align: left; 
 
    } 
 

 
} 
 
.content{ 
 
    padding-left: 16px; 
 
}

<div class="topmenu" id="mytopmenu"> 
 
    <a href="#">About</a> 
 
    <a href="#">Contact</a> 
 
    <a href="#">Privacy</a> 
 
    <a href="#">Sitemap</a> 
 
    <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div> 
 

 
<div class="content"> 
 
<p>your website content</p> 
 
</div>

Answer 3

これはあなたを助けるでしょう希望：

.page_menu_wrapper { 
 
    width:100%; 
 
    max-width:1100px; 
 
    margin:0 auto; 
 
} 
 

 
.clear { 
 
    clear:both 
 
} 
 

 
.page-menu ul { 
 
    display: inline-block; 
 
    margin: 0; 
 
    list-style: none; 
 
} 
 
.page-menu ul li { 
 
    float: left; 
 
    padding: 0 7px; 
 
    background-color:green; 
 
    transition:all 400ms ease-in-out} 
 

 
.page-menu { 
 
    float:left; 
 
    width:100%; 
 
    height:auto; 
 
    padding:0!important; 
 
    margin:0 5px; 
 
    text-align: center; 
 
    font-size:100%; 
 
    font-weight:400} 
 

 
.page-menu ul { 
 
    margin:0 auto!important; 
 
    text-align:center; 
 
    display: block; 
 
    width:100%; 
 
    padding:0!important; 
 
    line-height:72px} 
 

 
.page-menu li a:hover { 
 
    
 
    background-color:#e8554e!important} 
 

 
.page-menu ul li a { 
 
    color:white!important; 
 
    padding:0 40px 0 0; 
 
    text-decoration:none; 
 
} 
 

 
.page-menu ul li a img { 
 
    vertical-align:middle!important} 
 

 
@media screen and (max-width:1000px){ 
 
.page-menu,.search-box { 
 
    width:100%; 
 
    margin:0 } 
 
    
 
.page-menu ul li { 
 
    width:33.3%; 
 
    float:left} 
 
    
 
.page-menu ul li:first-child { 
 
    width:100%; 
 
    float:none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    margin-top:10px} 
 
    
 
.page-menu ul li:last-child { 
 
    width:100%; 
 
    float:none; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box;} 
 
    
 
.page-menu ul li { 
 
    text-align:center} 
 
    
 
.page-menu ul li a { 
 
    margin:0 auto; 
 
    padding:0} 
 

 
.page_menu_wrapper { 
 
    padding-bottom:10px} 
 
    
 
} 
 

 
@media screen and (max-width:480px){ 
 
    .page-menu ul {line-height:2em} 
 
} 
 

 
@media screen and (max-width:240px){ 
 
.page-menu ul li{width:50%} 
 
} 
 

 
.searchform { 
 
    display: inline-block; 
 
    zoom: 1; /* ie7 hack for display:inline-block */ 
 
    *display: inline; 
 
    padding:0 5px;} 
 
.searchform input { 
 
    font: normal 12px/100% Arial, Helvetica, sans-serif;} 
 

 
.searchform .searchfield { 
 
    background: #fff; 
 
    padding: 6px 6px 6px 8px; 
 
    width: 202px; 
 
    border: solid 1px #bcbbbb; 
 
    outline: none; 
 

 
    -webkit-border-radius: 2em; 
 
    -moz-border-radius: 2em; 
 
    border-radius: 2em; 
 

 
    -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
 
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2); 
 
    box-shadow: inset 0 1px 2px rgba(0,0,0,.2);} 
 

 
.searchform .searchbutton { 
 
    color: #fff; 
 
    border: solid 1px #494949; 
 
    font-size: 11px; 
 
    height: 27px; 
 
    width: 27px; 
 
    text-shadow: 0 1px 1px rgba(0,0,0,.6); 
 

 
    -webkit-border-radius: 2em; 
 
    -moz-border-radius: 2em; 
 
    border-radius: 2em; 
 

 
    background: #5f5f5f; 
 
    background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545)); 
 
    background: -moz-linear-gradient(top, #9e9e9e, #454545); 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */ 
 
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */ 
 
}

<div class="page_menu_wrapper"> 
 
<nav class='page-menu'> 
 
<ul> 
 
    <li><a href='/'><img height='70' src='logo.png' width='171'/></a></li> 
 
    <li><a href='about.php'><span itemprop='name'>About</span></a></li> 
 
    <li><a href='contact.php'><span itemprop='name'>Contact</span></a></li> 
 
    <li><a href='privacy.php'><span itemprop='name'>Privacy</span></a></li> 
 
    <li><a href='sitemap.php'><span itemprop='name'>Sitemap</span></a></li> 
 
    <li><a href='iklan.php'><span itemprop='name'>Iklan</span></a></li> 
 
    <li><form class="searchform"> 
 
\t <input class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" /> 
 
\t <input class="searchbutton" type="button" value="Go" /> 
 
</form></li> 
 
    </ul> 
 
</nav> 
 

 
    <div class='clear'></div> 
 
</div>