경계선을 짧게하고 검색 양식을 한 줄에 올리는 방법은 무엇입니까?

Question

이 사이트에서 작업하고 있습니다 : http://www.problemio.com 파란색 탐색 표시 줄의 오른쪽에 내 검색 양식이 가로로 나열되어 있지 않습니다. 거기에 그렇게 할 수있는 방법이 있습니까? 내 CSS는 메뉴 항목 여기

<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> 

과 :

나의 현재 HTML은 다음과 같이이다

.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; 
} 

, 1 픽셀 라인 GIF를 사용하여 각 리튬의 배경으로 설정합니다.

예 :

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