html input 태그와 button 태그를 같은 줄에 위치시키고 싶습니다.
조회수 3490회
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*ID Style*/
#input_search{
width: 400px;
height: 40px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 1px solid #dfe1e5;
}
#input_search_button{
width: 40px;
height: 40px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
border: 1px solid #dfe1e5;
}
</style>
</head>
<body>
<input type="text" id="input_search" value="" placeholder="ISBN">
<!-- <input type="button" value="JOIN"> -->
<button id="input_search_button" type="button">
<img src="/source/search.png" alt="">
</button>
</body>
</html>
위의 코드를 실행하면
계속해서 이렇게 줄이 맞춰지지 않는 문제가 발생합니다. 그리고 button의 margin값을 조절하면 input 박스가 함께 이동하고, 반대로 input 박스의 마진 값을 음수로 설정했을 때는 아무런 변화가 나타나질 않습니다. 5시간 넘게 고민하고 있습니다ㅠㅜㅠㅜㅠ 미리 감사드립니다😂
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
구현하고 계신 것을 inline form이라고 부릅니다. 해묵은 과제죠. 핵심 아이디어는 한 줄로 나와야 하는
input과button을 하나의 컨테이너로 묶어서 그 안에서 높이, 마진 등을 설정하는 것입니다.검색을 좀 해보시면 좋을 듯한데,
display: flex를 사용해도 되고height: 100%를 줘도 되고 아무튼 접근법은 많습니다. 인라인 폼 구현 자체에 관해 먼저 조사해 보시면, 지금 적용하려는 곳에 가장 적절한 방안이 뭔지 알 수 있을 것입니다.- 답변 정말 감사합니다! inline form이라는 개념을 처음 알게 되었네요! div태그로 묶고 display: flex 속성도 적용했는데 같은 문제가 발생한다면.. 제 코드에 문제가 있는 것이 맞겠죠??ㅠㅜㅠㅜ 아래 올린 코드까지 진행했습니다.. 알 수 없는 사용자 2021.4.24 19:05
- 묶고 → flex 했으니까 → 돼야하는데?? 하지 마시고.. 원리를 파악해서 응용을 해 주세요.. 엽토군 2021.4.27 09:01
댓글 입력