Question

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

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

1 个答案: