Q. html 위에 메뉴랑 가로 크기 똑같이 되게, More 버튼이 검색 옆에 들어가게 어떻게 만드나요? ㅠㅠ

기본 아바타 마만니 2019. 02. 12. 조회수 489


html을 갓 배웠지만 백지상태에서 시작하다보니 그냥 검색해서 나온걸 복사해서 좀 html이 더럽고, 모르는 게 많아서 이렇게 질문합니다...

알려주세용 ㅠㅠ 모르겠어요

html 위에 메뉴랑 가로 크기 똑같이 되게, More 버튼이 검색 옆에 들어가게 어떻게 만드나요?

답변 감사드립니다

body, ul {

margin: 0;

padding: 0;

text-align:center

}

ul {

margin: 10px;

display: table;

margin-left: auto;

margin-right: auto;

border: 1px solid #ccc;

}

li {

list-style-type: none;목록 앞에 붙는 점을 없애기

}

a {

text-decoration: none;밑줄 없애기

color: inherit;부모의 글자색 물려받기

}

/* Design Area */여기서 부터 실제 디자인하는 영역

body {

text-align: center;

}

.horizontal-menu {

position: relative;

display: inline-block;메뉴 가운데 정렬 / 이 때 text-align 속성은 반드시 상위 요소에 지정해야한다 / 본 예제에서는 body에 지정함

overflow: hidden;float clear , float 해제 / float를 사용했을 때 부모의 높이가 없어지는 문제점을 보완해주는 방법 중 한 가지!

border-bottom: 3px solid #318294;

}

.horizontal-menu li {

float: left;float를 이용하면 세로로만 배치되는 block 요소를 쉽게 가로배치 할 수 있다

}

.horizontal-menu a {

display: block;사용자 입장에서 링크 버튼을 사용하기 편하도록 링크 영역을 확장시켜줌

height: 50px;

line-height: 50px;텍스트 요소의 높이와 동일한 값을 지정하면 텍스트를 세로 가운데 정렬을 할 수 있다 / 단, 이 방법은 텍스트가 한 줄일때만 가능하다

background-color: #3ea3ba;

color: #000000;

padding: 0 35px;각 메뉴 버튼의 크기를 지정하지 않고 내부 여백을 이용하면 유지보수 작업에 용이하다

border-right: 1px solid #358da1;

}

.horizontal-menu li:last-child a { 가상클래스(last-child) / 해당 항목 중 제일 마지막 항목을 자동으로 선택해준다

border-right: 0;

}

.horizontal-menu a:hover { 가상클래스(hover) / 마우스를 해당 요소위에 얹었을 때 디자인을 변경할 수 있다

background-color: #358da1;

color: #e19fed;

}

input:-ms-input-placeholder {color:#a8a8a8; }

input::-webkit-input-placeholder {color:#a8a8a8;}

input::-moz-placeholder {color:#a8a8a8;}

.every {

}

.ser {

overflow: hidden;float clear , float

display: inline-block;

margin: 0;

padding: 0;

text-align:center

line-height: 50px;

margin: 0px;

display: block;

border: 1px solid #ccc;

margin-left: auto;

margin-right: auto;

}

.search {

position: relative;

margin: 6px;

display: block;

width: 300px;

margin-left: auto;

margin-right: auto;

width: 100%;

height: auto;

width: 400px;

border: 1px solid #000000;

background: #ffffff;}

.search:after {

content: "";

display: block;

clear: both;

}

.search2 {

position: absolute;

}

input{

font-size: 16px;

width: 325px;

padding: 10px;

border: 1px;

outline: none;

float: left;

}

button{

width: 50px;

height: 38px;

border: 0px

background: #1b5ac2;

outline: none;

float: right;

color: #000000

}

</style>

</head>

<body>

<div class="every">

<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>

</ul>

<div class="ser">

<div class="search">

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

<button>검색</button>

</div>

<button class="search2">More</button></div>

</body>

</html>

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

1개의 답변이 있습니다.

질문자 & 큐레이터 채택
아들바보 답변자인증
IT회사/개발팀 2019. 02. 12 100%의 채택

먼저 바로 옆으로 위치를 시키려고 한다면

.search {position: relative;
margin: 6px;
display: block;
width: 300px;  // 아래에 width:400px 도 있고 width:100%도 있음. 삭제되어야 함
margin-left: auto;
margin-right: auto;
width: 100%;  //아래에 width:100%도 있음. 삭제되어야 함
height: auto;
width: 400px;
border: 1px solid #000000;
background: #ffffff;
}

여기서 width를 450px로 수정.

HTML 구조에서 <button class="search2">More</button> 를

검색버튼 바로 하단에 위치시켜서 <div class="search"> 안에 위치시킴

<div class="search">
  <input type="text" placeholder="검색어 입력">
  <button class="search2">More</button>
  <button>검색</button>  
</div>

More 버튼위 더 위쪽인 이유는 button이 float:right 속성을 가지고 있기 때문.

https://jsfiddle.net/xgqb3cm2/1/

기본적인 DOM 구조도 현재 기본이 잡혀있지 않고 소스를 보면 거의 복붙 수준으로 보입니다.

그리고

display:inline

display:block

display:inline-block;

이 어떻게 다른지에 대해 공부를 조금 해보시는 것을 추천드립니다.

HTML에 대한 입문서 책을 구입하셔서 차근차근 공부를 먼저 해보시는 것을 추천드립니다.

댓글 0