html 검색창 border가 잘 안나와요 ㅠㅠ 어디를 고쳐야 할까요?
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>
검색창 밑에 선이 나와야 하는데
안 나와요
뭐가 문제죠? ㅠㅠ
그리고 검색창 자체를 메뉴에 맞게
오른쪽으로 가게 하고 싶은데
어떻게 하나요?
고수님들 답변 부탁해요...
안녕하세요? 마만니님. 지난가던 웹개발자입니다.
박정한 님께서 답변을 해주셨듯이 div에 border-bottom 나오지 않는 이유는 floating 된 input 창의 높이가 부모인 div 의 높이를 초과해서 가렸기 때문입니다.
추가적으로 말씀드리고 싶은 부분이 float 속성을 사용하신 경우 부모에서 반드시 clear: both해주셔야 한다는 점입니다.
기본적으로 float 속성이 적용된 엘리먼트는 부모 엘리먼트의 품에서 벗어나서 허공에 떠있는 상태입니다. 그래서 부모인 div 엘리먼트의 품을 벗어났던 것이죠. 이런 때는 부모의 가상선택자 :after 에 clear: both를 추가하면 부모가 자식의 높이를 포함하게 됩니다. 그리고 부모의 높이가 자식의 높이를 반영하도록 부모의 height 속성은 고정하지 않는 것을 추천드립니다.
div:after { content: ""; display: block; clear: both; }더 자세한 내용은 아래 링크를 참조해보시면 float 와 clear 속성에 대해 더 자세히 알아보실 수 있습니다.
