바로가기 아이콘 가로 나열 방법 문의
본문
아래의 바로가기 아이콘들을 가로로 나열하고 싶은데 세로로 정렬이 됩니다.ㅠㅠ
어떻게 해야할까요? (모바일입니다) 골머리를 앓고 있네요.ㅠ 도와주시면 감사합니다..!
<!-- 쪽지아이콘-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
">
<style>
img { width:10%; max-width:250px; }
</style>
<a href="https://naver.com">
<img src="/img2/message.png" alt="첨부"?>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">쪽지</h1>
</div>
<!-- 북마크-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
">
<style>
img { width:10%; max-width:250px; }
</style>
<a href="https://naver.com">
<img src="/img2/bookmark.png" alt="첨부"?>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">북마크</h1>
</div>
</div>
<!-- 지식-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
">
<style>
img { width:10%; max-width:250px; }
</style>
<a href="https://naver.com">
<img src="/img2/qna.png" alt="첨부"?>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">지식</h1>
</div>
</div>
<!-- 날씨-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
">
<style>
img { width:10%; max-width:250px; }
</style>
<a href="https://naver.com">
<img src="/img2/weather.png" alt="첨부"?>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">날씨</h1>
</div>
</div>
<!-- 포인트랭킹-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
">
<style>
img { width:10%; max-width:250px; }</style>
<a href="https://naver.com">
<img src="/img2/ranking.png" alt="첨부"?>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">포인트랭킹</h1>
</div>
답변 1
인라인 형식으로 스타일 짜지 마시고, 내부스타일이나 외부스타일 형식으로 짜세요.
현재 세로로 나열되는 이유는 블럭요소인 div 요소 안에 있어서 그렇습니다.
로로 나란히 하려면, DIV 요소에 float:left 속성을 추가하면 됩니다.
https://homzzang.com/b/css-256 (0번 참고)
급한 거 아니시면 일단은 CSS를 체계적으로 일주일정도 날 잡고 공부 후 짜보세요.
훨씬 코드가 간결해질겁니다.
답변을 작성하시기 전에 로그인 해주세요.
