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