<p> 와 <span> 태그를 이용하여서 구현한 <input> 태그와 <img>태그가 있습니다. 그런데 이게 화면을 축소시키면 <img>태그가 아래로 떨어져 버립니다. 이걸 어떡해야지 한라인에 계속 붙어있게 할 수 있을까요?
조회수 569회
<form class="menu_content_search" action="/action_page.php" style="margin-top: 12px">
<p><span><input type="text" name="q" placeholder="검색" style="height:42px; margin-top: 2px"><img src="img/search.png" style="margin-top: -4px" value="Submit" onclick="#"></span></p>
<!-- <input type="submit"> -->
<!-- <button id="search_btn"></button> -->
</form>
</div>
소스부분이에요~
여기는 제가 구현해놓은 링크에요 링크 이름
들어가시면 상단에 메뉴 navbar부분에 오른쪽 끝, input창이 있어요 그 부분 옆에 img를 하나 돋보기 이미지를 넣어놨는데 이게 창 넓이를 축소시키면 이미지가 아래로 떨어집니다
이문제를 어떻게 해결해야할까요
저는 태그를 써서 한 라인에 보여지게 만들려고 했는데 안되네요
방법을 알려주세요~~~ 부탁드려요~
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
브라우저 개발자도구로 검사해 보면
.navbar form이 결과적으로 필요로 하는 너비는 대충219px입니다. 그런데.navbar form의width속성은16%로 잡혀 있거든요. 이 16%라는 계산은.navbar의 (전체 창 넓이에 대하여 자동 계산된) 너비에 대한 계산이고요. 그러니 창을 너무 줄여서 그16%에 해당하는 최종 계산값이219px보다 작아지면 현재처럼 레이아웃이 깨지는 겁니다.일단 이렇게 고치시면 원하는 효과는 얻으실 수 있을 겁니다.
.navbar form { /* width: 16%; */ /* <-- 이건 빼시고 */ margin-right: 0% !important; display: inline-block; /* <-- 이걸 넣어보세요. */ }
댓글 입력