CSS 정렬 검색 상자

몇 가지 시도를했지만 결과를 얻을 수 없었습니다. 그것의 헤더에 test.jpg를 이미지의 오른쪽에 앉아 있도록 내가 양식을 이동할 수있는 방법CSS 정렬 검색 상자

<div id="header"> 
    <img src="test.jpg" /> 
    <form id="search_form"> 
     <input class="kw" id="keyword" placeholder="Keyword" type="text"></input> 
     <input id="loc" placeholder="Location" type="text"></input> 
     <input type="submit" value="Search" class="button" id="search"> 
    </form> 
    <ul> 
     <li><a href="#">Post</a> 
     </li> 
    </ul> 
</div>

:이 코드 http://jsfiddle.net/spadez/2JTfc/4/embedded/result/

이

내 jsfiddle입니다 같은 줄? 내가 divs에서 그것을 둘러 쌓고 그것을 뜨거나, 더 좋은 방법이 있습니까?

출처

2013-06-05 Jimmy

이 시도 참조 :

#header img {vertical-align: middle;} 

#header form {display: inline-block; vertical-align: middle;}

마지막 행동은 입력에서 float: left을 제거하는 것입니다.

출처

2013-06-05 11:00:15

완벽한 모양입니다. 감사합니다. 내 제출 버튼이 지금 올바른 높이에 앉아 있지 않은 이유를 알 수 있습니까?! http://jsfiddle.net/spadez/2JTfc/7/embedded/result/ – Jimmy

아, 죄송합니다, 그 비트를 놓쳤습니다. 조금 까다 롭지 만 브라우저 (Chrome)에서 다음과 같이 정렬했습니다. '#header input.button {vertical-align : middle; 높이 : 27px; margin-top : -3px;}' –

추가 display:inline-block는 양식의 기본 display 스타일 block

#search_form{ 
    display:inline-block 
}

DEMO

출처

2013-06-05 10:57:46 Sowmya

입니다 형성한다. 따라서 인라인으로 표시하려면 해당 값을 inline-block으로 변경해야합니다. this jsFiddle

#search_form { 
    display: inline-block; 
}

출처

2013-06-05 10:57:56

CSS 정렬 검색 상자

답변

관련 문제