带徽标和搜索框的对齐菜单

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 {
	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 class='clear'></div>
</div>

徽标不在左侧，搜索框在右侧。

线条高度不同（见绿色）。链接的单元格高度和宽度不同。鼠标单击链接（蓝色）的效果不在整个单元格中。

我找到了类似的菜单，但没有回复。见https://jsfiddle.net/mr5Ljfm5/

请您帮我调整以下菜单？

感谢您的时间。

Answer 1

使用flexbox帮助垂直对齐和项目之间的间距。

＆＃13;

＆＃13;

strtol()

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

希望这会对你有所帮助：

＆＃13;

＆＃13;

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

＆＃13;

<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">
	<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 class='clear'></div>
</div>

＆＃13;

＆＃13;

＆＃13;