페이지 너비에 맞게 크기가 조정되는 HTML 격자를 만드는 방법은 무엇입니까?

Question

나는 프로그램 적으로 페이지에 쓰고 싶은 가변 수의 링크를 가지고있다. 하나의 긴 목록을 갖고 싶지는 않지만 하나 이상의 열에있는 링크를 도표화하십시오. 그러나 특정 수의 열이있는 테이블을 강제로 만들고 싶지 않습니다 ... 대신 열 너비를 지정하거나 각 열을 가장 넓은 요소에 자동으로 맞추려고합니다.

정규 HTML/CSS를 사용하면이 목표를 달성 할 수 있습니까? 참고로 C# (.NET2)에서이 작업을 수행하고 있지만 누군가 코드에서 bash를 원한다면 임의의 의사는 괜찮습니다. 입력은 단순히 페이지에 쓰려는 문자열의 배열/목록입니다. 공정하게하지만 http://jsfiddle.net/vYtBM/ 다른 방식의 부하가 있습니다

당신이 그것을 할 수 있습니다 :

Answer 1

당신은 의 사용 목록을 인라인 할 수 있습니다. 각 항목의 너비가 고정 된 가로 목록을 생각해보십시오.

link1.....link2.....link3.....link4..... 
link5.....link6.....link7.....link8..... 
link9.....link10....link11.... 

등등. 귀하의 목록 (ul)을 인라인하여 각 항목 (li)의 너비를 고정시켜야합니다. 여기

는 (개념은 동일합니다) 트위터 부트 스트랩을 사용하여 작동하는 데모입니다 : 경우 http://jsfiddle.net/FXkYr/

여기에 트위터 부트 스트랩를 사용하면 사용할 필요가 관련 HTML & CSS 있습니다 싶지 않아 :

HTML :

<ul> 
    <li><a href="#">link1</a></li> 
    <li><a href="#">link2</a></li> 
    <li><a href="#">link3</a></li> 
</ul> 

CSS :

ul { 
    margin-left: 0; 
    list-style: none; 
} 

li { 
    width: 100px; 
    display: inline-block; 
    padding-left: 5px; 
    padding-right: 5px; 
    /* The following two lines is because IE is funny... */ 
    *display: inline; 
    *zoom: 1; 
} 

Answer 2

여기 당신이 그것을 할 수있는 하나의 방법입니다. 각 LI 안에 앵커 태그가있는 정렬되지 않은 목록을 통해 다른 방법이 있습니다.

<div class="container"> 
    <a href="#">Link #1</a> 
    <a href="#">Link #2</a> 
    <a href="#">Link #3</a> 
    <a href="#">Link #4</a> 
    <a href="#">Link #5</a> 
    <a href="#">Link #6</a> 
    <a href="#">Link #7</a> 
    <a href="#">Link #8</a> 
    <a href="#">Link #9</a> 
</div> 

.container { 
    overflow: hidden; 
    width:960px; 
} 

.container a { 
    display: inline-block; 
    width: 440px; 
    padding: 10px; 
    background: #ccc; 
    margin: 0 20px 20px 0; 
    float: left; 
}