바로가기 아이콘 가로 나열 방법 문의 채택완료
도현입니다
6년 전
조회 3,535
아래의 바로가기 아이콘들을 가로로 나열하고 싶은데 세로로 정렬이 됩니다.ㅠㅠ
어떻게 해야할까요? (모바일입니다) 골머리를 앓고 있네요.ㅠ 도와주시면 감사합니다..!

</p>
<p>
<!-- 쪽지아이콘-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
"></p>
<p> <style>
img { width:10%; max-width:250px; }
</style></p>
<p>
<a href="<a href="<a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a>"><a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a></a>">
<img src="/img2/message.png" alt="첨부"?></p>
<p>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">쪽지</h1>
</div></p>
<p> </p>
<p><!-- 북마크-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
"></p>
<p> <style>
img { width:10%; max-width:250px; }
</style></p>
<p>
<a href="<a href="<a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a>"><a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a></a>">
<img src="/img2/bookmark.png" alt="첨부"?></p>
<p>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">북마크</h1>
</div>
</div></p>
<p> </p>
<p><!-- 지식-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
"></p>
<p> <style>
img { width:10%; max-width:250px; }
</style></p>
<p>
<a href="<a href="<a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a>"><a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a></a>">
<img src="/img2/qna.png" alt="첨부"?></p>
<p>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">지식</h1>
</div>
</div></p>
<p> </p>
<p><!-- 날씨-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
"></p>
<p> <style>
img { width:10%; max-width:250px; }
</style></p>
<p>
<a href="<a href="<a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a>"><a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a></a>">
<img src="/img2/weather.png" alt="첨부"?></p>
<p>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">날씨</h1>
</div>
</div></p>
<p> </p>
<p> </p>
<p>
<!-- 포인트랭킹-->
<div style="
margin: 10px 0px 0px 0px;
padding: 10px 10px 10px 15px;
background-color: #ffffff;
text-align:center;
"></p>
<p> <style>
img { width:10%; max-width:250px; }</style></p>
<p>
<a href="<a href="<a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a>"><a href="https://naver.com" target="_blank" rel="noopener noreferrer">https://naver.com</a></a>">
<img src="/img2/ranking.png" alt="첨부"?></p>
<p>
<h1 style="
float: center;
margin-top: 5px;
color: #000000;
font-size: 12px;
font-weight: normal;
">포인트랭킹</h1>
</div>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
sinbi
Expert
6년 전
인라인 형식으로 스타일 짜지 마시고, 내부스타일이나 외부스타일 형식으로 짜세요.
https://homzzang.com/b/css-3">https://homzzang.com/b/css-3
현재 세로로 나열되는 이유는 블럭요소인 div 요소 안에 있어서 그렇습니다.
로로 나란히 하려면, DIV 요소에 float:left 속성을 추가하면 됩니다.
https://homzzang.com/b/css-256 (0번 참고)
급한 거 아니시면 일단은 CSS를 체계적으로 일주일정도 날 잡고 공부 후 짜보세요.
훨씬 코드가 간결해질겁니다.
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인