검색이 내비게이션 옆에 표시되지 않음

나는 가로형 메뉴를 가지고 있으며 검색 양식을 한 줄에 배치하고 싶지만 새 줄에는 왼쪽으로 정렬되어 나타납니다. html에 익숙하지 않기 때문에 기초를 배울 수 있습니다 (작업 중 내 세 번째 사이트에서 CSS를 사용하고 있습니다.)검색이 내비게이션 옆에 표시되지 않음

<div id="nav"> 
    <span class="nav"> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/skydevUpperNav.png"></span></a> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/goftbUpperNav.png"></span></a> 
     <a href="#" alt="$"><span id="jqFade"><img src="images/genUpperNav.png"></span></a> 
     <span id="searchBox"> 
      <form action="#" method="get">Search 
       <input type="text" name="searchGoogle" size="12" maxlength="45" /> 
      </form> 
     </span> 
</div>

출처

2013-04-05 user2237852

어떤 코드가 작동하지 않는지 보여줄 수 있습니까? – metadept

당신은 또한 당신의 CSS를 게시해야합니다 –

그냥 힌트 : 나는 당신이 ''을 놓친 것 같아요. 게다가 : ''은 인라인 요소이며'

사용 display: inline-block;

근무 바이올린 :

http://jsfiddle.net/wN6Ae/1/

CSS : 사용자가 설정해야합니다 있도록

searchBox{ 
    display: inline-block; 
    margin-left: 10px; 

}

출처

2013-04-05 01:09:11

양식 요소가 기본적으로 block로 렌더링됩니다 검색 상자 양식 display: inline-block;. 스팬에있는 블록 요소를 래핑하는 것은 포함 된 요소가 렌더링되는 방식을 변경하지 않기 때문에 효과적인 솔루션이 아닙니다.

jsFiddle 데모 : http://jsfiddle.net/Bf46a/

출처

2013-04-05 01:09:29 metadept

실제로는 효과가 없을뿐만 아니라 ('display : block'으로 덮어 쓸 수 있습니다.) 유효하지 않습니다. . –

당신이 탐색 및 float:left;에 대한 <ul><li>에 태그를 사용해야 목록 요소에 걸쳐 좋은하지 않습니다. 목록 스타일이 표시되지 않으면 list-style-type: none;을 설정하십시오. <img>도 닫아야합니다. -><img .... />

출처

2013-04-05 01:13:15 di3

검색이 내비게이션 옆에 표시되지 않음

답변

관련 문제