검색 필드가있는 CSS 메뉴 - Chrome, FF 및 IE

CSS에서 멋진 고유의 간단한 메뉴를 만들고 싶습니다. 크롬에서는 괜찮아 보입니다.하지만 ff에서는 끔찍한 것처럼 보입니다.검색 필드가있는 CSS 메뉴 - Chrome, FF 및 IE

의 내가 탐색 계층이 있다고 가정 해 보자 (40px 높이, 폭 100 %) :

<nav id="navbar"> 
<div class="main-navigation"> 
    <ul> (list-style:none;) 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Page1</a></li> 
     <li><a href="#">Page2</a></li> 
     <li><a href="#">Page3</a></li> 
     <li><a href="#">Page4</a></li> 
    </ul> 
    <div class="search"> 
     <form method="get" action=""> 
      <input type="text" name="q" class="search-input" placeholder="Type here" /> 
      <input type="submit" class="search-btn" value="Search" /> 
     </form> 
    </div> 
</div> 
</nav>

내가 높이 30 픽셀, 글꼴 크기와 모든 버튼 싶은

: 14px를; border-radius : 5px; 및 검색 입력 및 제출 버튼 (입력 높이 30px, 테두리 반경 : 5px 0 0 5px, 제출 높이 30px, 테두리 반경 : 0 5px 5px 0)

하나, 동등한 라인에 표시?

많은 감사

출처

2012-03-13 Wojciechk

문제를 설명하기 위해 jsFiddle을 만드는 방법은 어떻습니까? – j08691

이 예제에서 높이 [link] (http://jsfiddle.net/nddWN/)는 36px이고 검색 div의 높이는 ff – Wojciechk

인라인 블록이 가장 좋은 대안입니다. 그것은 생각의 작은 조정이지만, 그만한 가치가 있습니다. Re-fiddled

출처

2012-03-13 21:23:15 devstruck

검색 필드가있는 CSS 메뉴 - Chrome, FF 및 IE

답변

관련 문제