html - 如何对齐 CSS 导航栏中间的元素？

Question

我需要帮助来对齐导航栏中间的对象，但这很奇怪我不擅长网页设计这是我学习的第一周但我找不到任何其他来源来解决这个问题。

这是我的导航栏

这是我的 CSS 代码:

#nav{
   display: block;
   background-color: #fff;
   width:100%;
   min-width:1003px;
   max-height:50px;
   padding:0;
   margin: 0;
   position: absolute;
   top:0;
   left: 0;
   box-shadow: 0px 1px 1px #fff;
   clear: both;
}
#nav ul{
   display: inline-block;
   vertical-align: middle;
}
#nav a{
   display: inline-block;
   vertical-align: middle;
   font-family: Code2;
   text-decoration: none;
   color: #000;
   padding: 11px;
   clear: both;
}
#nav a:hover{
   color:#FF2054;
}
#nav li{
   display: inline;
}
#nav img{
   clear:both;
   height:40px;
   width:40px;
   content: "";
}
#nav h1{
   font-weight: normal;
}
.textbox {
   background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px;
   margin:0;
   margin-top: -4px;
   max-width:250px;
   padding-left:23px;
   display: inline;
   border:2px solid #999999;
   height:28px;
   border-radius: 3pt;
   font-family: Code2;
}
</style>

这是我的 HTML 代码:

<div id="nav">
<ul>
<li>
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" width="50" height="50" /></a>
</li>
<li>
<form action="search.pl" method="get" style="display:inline;">
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH...">
</form>
</li>
<li>
<a href="#">BROWSE</a>
</li>
<div style="float:right;">
<li>
<a href="#">HOW IT WORKS</a>
</li>
<li>
<a href="" style="">SIGN UP</a>
</li>
<li>
<a href="">LOGIN</a>
</li>
</div>
</ul>
</div>

提前致谢。

Answer 1

尝试在 css 上使用 text-align:center