네이게이션바를
<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개 / 댓글 1개
채택된 답변
+20 포인트
Copy
<!DOCTYPE html><html> <head> <style type="text/css"> .landscapes { display: table; width: 100%; padding: 0; } .landscapes li { display: table-cell; } .landscapes li a { display: block; text-decoration: none; text-align: center; background-color: #eee; color: #000; padding: 1.0em 0; } .landscapes li a:hover { background-color: #000; color: #eee; } </style> </head> <body> <ul class="landscapes"> <li><a href="#">1</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> </ul> <ul class="landscapes"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">7</a></li> </ul> </body></html>답변을 작성하려면 로그인이 필요합니다.
( ^ ________ ^ ) ======b