html - 不明白如何编辑风格怪异的 导航栏

Question

我有一个站点 problemio.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;
}