네이게이션바를
<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 포인트
8년 전
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>답변에 대한 댓글 1개
sinbi
8년 전
8년 전
유동적으로 변하는 조건을 알아야 그에 맞게 코드를 넣을 수 있습니다.
8년 전
테이블 레이아웃을 이용하면 가능합니다.
li {
display: table-cell;
width: 1%;
}
로 설정해보세요.
다만, 이 방법이 과거 부트스트랩의 justify 정렬에서 사용되었더가 무엇인가 이유로 제거되었는데 그 사유는 정확히 기억이 나질 않네요.
답변을 작성하려면 로그인이 필요합니다.
( ^ ________ ^ ) ======b