아하
검색 이미지
생활꿀팁 이미지
생활꿀팁생활
생활꿀팁 이미지
생활꿀팁생활
탈퇴한 사용자
탈퇴한 사용자19.02.11

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>

위 사진처럼

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

안 나와요

뭐가 문제죠? ㅠㅠ

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

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

어떻게 하나요?

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

55글자 더 채워주세요.
답변의 개수
2개의 답변이 있어요!
  • 아임유얼파더
    아임유얼파더19.02.12

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

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

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

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

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

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

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


  • https://jsfiddle.net/eavcL12w/

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