테스트 사이트 - 개발 중인 베타 버전입니다

바로가기 아이콘 가로 나열 방법 문의 채택완료

도현입니다 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 포인트
s
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를 체계적으로 일주일정도 날 잡고 공부 후 짜보세요.

훨씬 코드가 간결해질겁니다.

 

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인