如何縮短邊框並將搜索表單排成一行？

Question

我在本網站工作：http://www.problemio.com，並在藍色導航欄的右側，我的搜索表單不水平排列。有沒有辦法讓它做到這一點？

我現在的HTML是這樣的：

<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"> 
        Search 
        <input type="text" size="20"> 
        <input type="submit" value="Search"></input> 
        </form> 
      </li>   

      <li class="main_menu_li"><a href="http://www.problemio.com/">Support</a> 
      </li> 


      <li class="main_menu_li_left"><a href="http://www.problemio.com/">Problems</a> 
       <ul class="child_menu_ul"> 
        <li class="first"><a href="http://www.problemio.com/">Categories</a></li> 

        <li class="last"><a href="http://www.problemio.com/">Hello 5</a></li> 

       </ul> 
      </li> 
     </ul> 
</div> 

，這裏是我的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; 
/* 
    -moz-border-radius: 14px; 
    -webkit-border-radius: 14px; 
*/ 

} 

.menusystem ul li 
{ 
    position: relative; 
/* 
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4); 
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4); 
    -moz-border-radius: 14px; 
    -webkit-border-radius: 14px; 
*/ 


} 

.menusystem ul li ul 
{ 
    display: none; 
    position: absolute; 
    top: 1.6em; 
    right: 0; 
    width: 10em;  

} 

.menusystem li a { 
    display: block; 
    padding: 5px 10px; 
    /* dark blue */ 
/* border: 1px solid #2e6ea4; */ 
    text-decoration: none; 
} 

.menusystem ul li.main_menu_li 
{ 
    float:right; 
    width: 10em; 
    margin-right:0.2em; 
    text-align: center; 
    border-left: solid 1px white; 
    border-left: solid 1px white; 
} 

.menusystem ul li.main_menu_li_left 
{ 
    float:right; 
    width: 10em; 
    margin-right:0.2em; 
    text-align: center; 
} 

/* 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; 
    */ 
    color: #fff; 
    /* light blue */ 
/* background: #7ba9c9; */ 

     font-size: 80%; 
    text-shadow: none; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-bottom: 1px solid #2e6ea4; 
    border-top: 0px; 
    background: none repeat scroll 0 0 #2E6EA4; 
} 
.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; 
    border-top: 1px solid #2e6ea4; 
} 

.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.only a 
{ 
    -moz-border-radius: 14px; 
    -webkit-border-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; 
/* 
    background: -moz-linear-gradient(100% 100% 90deg, #668eb8, #2e6ea4); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#668eb8), to(#2e6ea4)); 
*/ 

    text-shadow: 1px 1px 1px rgba(0,0,0,0.9); 
    /* 
    -moz-text-shadow: 1px 1px 1px rgba(0,0,0,0.9); 
    -webkit-text-shadow: 1px 1px 1px rgba(0,0,0,0.9); 
    -moz-border-radius: 14px; 
    -webkit-border-radius: 14px; 
*/ 
} 

.menusystem li.main_menu_li a:hover 
{ 
/*  background-color: #2e6ea4; */ 
    color: #ff0; 
} 

ul li.spaced 
{ 
    padding-bottom: 10px; 
    font-weight: normal;  
} 

我怎樣才能排隊水平搜索區？另外，有沒有辦法讓導航項目之間的白色邊框縮短？

Answer 1

要在IE7中排列表單，請使用下面的css。對於其他瀏覽器只需調整最高值。

ul.main_menu_ul form{ 
    position:relative; 
    top:-4px; 
} 

如果你想在白色邊框比列表項的高度更短，使用1px的線GIF並將其設置爲每個L1的背景。

例如。

ul.main_menu_ul li{ 
    background:url(../images/line.gif) no-repeat top right; 
} 
ul.main_menu_ul li.last{ 
    background:none; 
}