Q. html 검색창 border가 잘 안나와요 ㅠㅠ 어디를 고쳐야 할까요?

마만니 2019. 02. 11.


div{

height: 30px;

width: 400px;

border: 1px solid #000000;

background: #ffffff;

}

input{

font-size: 16px;

width: 325px;

padding: 10px;

border: 1px;

outline: none;

float: left;

}

button{

width: 50px;

height: 100%;

border: 0px

background: #1b5ac2;

outline: none;

float: right;

color: #000000

}

</style>

</head>

<body>

<ul class="horizontal-menu">

<li><a href="#">SPo</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Products</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Contact</a></li>

</ul>

<div>

<input type="text" placeholder="검색어 입력">

<button>검색</button>

</div>위 사진처럼

검색창 밑에 선이 나와야 하는데

안 나와요

뭐가 문제죠? ㅠㅠ

그리고 검색창 자체를 메뉴에 맞게

오른쪽으로 가게 하고 싶은데

어떻게 하나요?

고수님들 답변 부탁해요...

공유하고 보상받기 ♥︎
댓글 0

2개의 답변이 있습니다.

질문자 & 큐레이터 채택
다스베이더 답변자인증
FE 개발팀 2019. 02. 12
81%의 채택

안녕하세요? 마만니님. 지난가던 웹개발자입니다.

박정한 님께서 답변을 해주셨듯이 divborder-bottom 나오지 않는 이유는 floating 된 input 창의 높이가 부모인 div 의 높이를 초과해서 가렸기 때문입니다.

추가적으로 말씀드리고 싶은 부분이 float 속성을 사용하신 경우 부모에서 반드시 clear: both해주셔야 한다는 점입니다.

기본적으로 float 속성이 적용된 엘리먼트는 부모 엘리먼트의 품에서 벗어나서 허공에 떠있는 상태입니다. 그래서 부모인 div 엘리먼트의 품을 벗어났던 것이죠. 이런 때는 부모의 가상선택자 :afterclear: both를 추가하면 부모가 자식의 높이를 포함하게 됩니다. 그리고 부모의 높이가 자식의 높이를 반영하도록 부모의 height 속성은 고정하지 않는 것을 추천드립니다.

div:after {
  content: "";
  display: block;
  clear: both;
}

더 자세한 내용은 아래 링크를 참조해보시면 floatclear 속성에 대해 더 자세히 알아보실 수 있습니다.

https://ofcourse.kr/css-course/clear-%EC%86%8D%EC%84%B1

댓글 0
박정한 답변자인증
CODE 200/프론트엔드 개발 2019. 02. 12
19%의 채택

https://jsfiddle.net/eavcL12w/

Height를 지정해주셔야 합니다. Input이 div의 영역을 넘는 height를 기본으로 가지고 있었네요.

댓글 0