TIL - heading 태그와 다른 태그를 한 줄에 넣기
상단에 우리가 일반적으로 보는 헤더처럼 heading 태그 < h1 >과 다른 button들을 같은 줄에 넣고 싶었다.
<div class="header">
<h1><a href="index.html">MUMA</a></h1>
<span class="headerBtn">
<button onclick="open_search()"><img src="https://img.icons8.com/ios-glyphs/30/000000/search--v1.png"/></button>
<button>로그인</button>
<button>회원가입</button>
</span>
</div>
처음엔 이렇게하고 span 태그의 justify-content를 end로 해서 오른쪽으로 붙이기는 했는데 계속 h1태그와 줄이 달랐다.
display: flex;
flex-direction: row;
align-items: center;
justify-content: end;
그런데 알고보니 Heading 태그들은 모두 block 태그로 한 줄을 다 차지하는 태그였다. 그래서 이번엔 h1을 inline으로 바꿔주었더니 span태그가 h1 옆에 같은 줄로 붙기는 했다.
h1{
display: inline;
margin: 20px 0 0 20px;
}
그런데 이번엔 또 justify-content: end;가 먹지 않고 너무 h1태그 옆으로 붙어버렸다. 그래서 찾은 결과 span태그를 오른쪽으로 float을 주었더니 아래와 같이 나란히 또 따로 버튼이 위치하였다.
.headerBtn{
float: right;
margin: 10px 20px 0px 0px;
}
float: 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다.
float에는 none; right; left; 등의 속성값을 사용할 수 있다.
Author And Source
이 문제에 관하여(TIL - heading 태그와 다른 태그를 한 줄에 넣기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@isabel_noh/TIL-heading-태그와-다른-태그를-한-줄에-넣기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)