不明白如何编辑奇怪样式的<ul>导航栏

Question

我有一个网站问题。com(不链接，以免看起来垃圾邮件)

有一个导航栏在顶部，我正试图添加一个表单与搜索文本字段的栏。但是现有的导航有点麻烦(我继承了它)，我不知道如何改变它。

这里是html

<div class="nav">
    <div class="icons">
            <?php
            if (  test )
            {
                echo '<form id="header_search" method="post"><input type="text" value="search" /></form>'; 
                // How do I style this so it is on the very right side of the bar and actually vertically center-aligned?
            }
            ?>  
    </div>      
    <div class="menusystem" id="site_nav">      
        <ul class="main_menu_ul"> <!-- The entire nav thing -->
            <li class="main_menu_li"> 
                            <form  name="form" method="post" id="header_search">
                   <span style='text-align:center; float:left; ' > Search 
                    <input type="text" size="10" id="search_string"> 
                    <input type="submit"  value="Search"></input>  
                   </form>
                   </span>
            </li>           
            <li class="main_menu_li_left">Menu item 
                <ul class="child_menu_ul"> 
                    <li>Some item</li> 
                    <li>Some item</li>
                </ul> 
            </li>
            <!--
            <li class="main_menu_li_left">
            <?php
            if (  testing )
            {
                echo '<form id="header_search" method="post"><input type="text" value="search" /></form>';
            }
            ?>
            </li>
            -->             
        </ul>
</div> <!-- Closing menusystem div -->

下面是一些css:

.nav_bar
{
    #background-image: url('http://www.problemio.com/img/ui/brownbannerbar.png');
    background-size:100%;   
    background-color: black;        
}
/* styles for nav_bar: */ 
.nav_bar a
{
    z-index: 20;
    width:100%;
    color: white;   
    position: relative;
}
.nav_bar .nav 
{
    width:60em;
    height: 40px;
    margin: 0 auto;
    position: relative;
    z-index: 20;
}
.nav_bar .icons 
{
    position: absolute;
    #left: 0;
    display: inline-block;
    float: right;   
}
.nav_bar .icons div 
{
    display: inline-block;
    position: relative; 
    top: 10px;
    float:left;
}
.nav_bar .nav #site_nav 
{
    position: absolute;
    right: 0.5em;
    top: 0.2em;
    z-index: 20;
}

这是我不太明白的结构的css:

.menusystem 
{
    position: absolute;
    font-size: 1em;
    color: white;
}
.menusystem ul, .menusystem li 
{
    margin: 0;
    padding: 0;
}
.menusystem li 
{
    list-style: none outside none;
}
.menusystem ul 
{
    list-style: none;
}
.menusystem ul li ul 
{
    display: none;
    position: absolute;
    top: 1.6em;
    right: 0;
    background-color: #5C5957; /* this gives the whole thing a background color */
}
.menusystem li a 
{
    text-decoration: none;
}
.menusystem ul li.main_menu_li 
{
    padding-right: 20px;
    padding-left: 20px;
    margin-top: 7px;
    margin-bottom: 7px; 
    display: block;
    float:right;
    margin-right:0.2em;
    text-align: center;
    border-left: solid 1px white;   
/*  line-height: 1em;   */
    height: 15px;
}
.menusystem ul li.main_menu_li_left
{
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 7px;    
    margin-bottom: 7px;     
    display: block;
    float:right;
    margin-right:0.2em;
    text-align: center;

/*  line-height: 1em;   */
    height: 15px;   
}
/* IE-Win (Holly hack) reads the list item line breaks, so lets hide those */
* html ul li { float: left; }
* html ul li a { height: 1%; }

.menusystem li:hover ul, .menusystem li.mouseHover ul { 
    display: block;
}
.menusystem li ul.child_menu_ul li a
{
    color: #fff;

    font-size: 80%;
    text-shadow: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-top: 0px;
}

.menusystem li ul.child_menu_ul li.first a
{
    -moz-border-radius-topleft: 14px;
    -moz-border-radius-topright: 14px;
    -webkit-border-top-left-radius: 14px;
    -webkit-border-top-right-radius: 14px;
    -moz-border-radius-bottomleft: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-left-radius: 0;
    -webkit-border-bottom-right-radius: 0;
}

.menusystem li ul.child_menu_ul li.last a
{
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-top-left-radius: 0px;
    -webkit-border-top-right-radius: 0px;
        -moz-border-radius-bottomleft: 14px;
    -moz-border-radius-bottomright: 14px;
    -webkit-border-bottom-left-radius: 14px;
    -webkit-border-bottom-right-radius: 14px;
}

.menusystem li ul.child_menu_ul li a:hover 
{
    color: #ff0;
    background: #2e6ea4; 
}
/*.menusystem li.main_menu_li a */
.menusystem ul.child_menu_ul a
{
    color: #fff;            
    text-shadow: 1px 1px 1px rgba(0,0,0,0.9);
}
.menusystem li.main_menu_li a:hover 
{
    color: orange;
}

你知道我怎样才能使搜索栏表单从结构中分离出来，在导航栏的右侧对齐，并垂直居中对齐吗?

谢谢!

Answer 1

这是你想要的样子吗?http://benjaminhopkins.co.uk/stackoverflow/problemio.htm

在<div class="nav_bar">下一页，我添加了。

<div id="search">
    <label for="txtSearch">Search</label>
    <input type="text" id="txtSearch" />
</div>

在CSS中我添加了

#search
{
  float:right;
  width:14em;
  margin-top:7px;
}

最后的CSS更改是.nav_bar .nav规则，所以现在看起来像。

.nav_bar .nav 
{
  width:46em;
  height:40px;
  margin: 0;
  position: relative;
  z-index: 20;
  left:0;
}