li width 유동적으로.... 채택완료
잠다
8년 전
조회 3,394
네이게이션바를
<ul style="widh:100%">
<li>dd<li>
<li>dd<li>
<li>dd<li>
<li>dd<li>
<li>dd<li>
</u>
이런식으로 짜고
li의 갯수는 4개가 될 수도 있고 5개가 될 수도 있습니다.
근데 4개일 경우 li width를 25% 5개일 경우 20%를 줘야지 화면 가로 폭에 전체 딱 들어맞는데
이게 유동적으로 변하는거라서 li width값을 딱 지정해버리면 안될것같습니다.
css만으로 li갯수에 따라서 화면 전체 폭에 맞출 수 있는 방법이 있을까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
8년 전
</p><p><!DOCTYPE html></p><p><html></p><p> <head></p><p> <style type="text/css"></p><p> .landscapes {</p><p> display: table;</p><p> width: 100%;</p><p> padding: 0;</p><p> }</p><p> .landscapes li {</p><p> display: table-cell;</p><p> }</p><p> .landscapes li a {</p><p> display: block;</p><p> text-decoration: none;</p><p> text-align: center;</p><p> background-color: #eee;</p><p> color: #000;</p><p> padding: 1.0em 0;</p><p> }</p><p> .landscapes li a:hover {</p><p> background-color: #000;</p><p> color: #eee;</p><p> }</p><p> </style></p><p> </head></p><p> <body></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> <li><a href="#">3</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> <li><a href="#">3</a></li></p><p> <li><a href="#">4</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> <li><a href="#">3</a></li></p><p> <li><a href="#">4</a></li></p><p> <li><a href="#">5</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> <li><a href="#">3</a></li></p><p> <li><a href="#">4</a></li></p><p> <li><a href="#">5</a></li></p><p> <li><a href="#">6</a></li></p><p> </ul></p><p> <ul class="landscapes"></p><p> <li><a href="#">1</a></li></p><p> <li><a href="#">2</a></li></p><p> <li><a href="#">3</a></li></p><p> <li><a href="#">4</a></li></p><p> <li><a href="#">5</a></li></p><p> <li><a href="#">6</a></li></p><p> <li><a href="#">7</a></li></p><p> </ul></p><p> </body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
s
sinbi
8년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
( ^ ________ ^ ) ======b