목록 항목을 열로 표시하는 방법은 무엇입니까?
첫 번째 반응 형 레이아웃을 구축하려고합니다. 너비에 따라 목록 항목을 세로줄로 표시하고 싶습니다.
<div style="height:800px;">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
1 5 2 6 3 7 4
브라우저의 크기가 조정되면
1 4 7 2 5 3 6
누군가 나를 도울 수 있습니까? 몇 시간 동안 노력했지만 아무것도 얻을 수 없습니다. 나는 테이블을 사용해 보았지만 그렇게 할 수는 없습니다.
이것은 CSS3 열을 사용하여 매우 쉽게 수행 할 수 있습니다. 다음은 HTML의 예입니다.
#limheight {
height: 300px; /*your fixed height*/
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; /*3 in those rules is just placeholder -- can be anything*/
}
#limheight li {
display: inline-block; /*necessary*/
}
<ul id = "limheight">
<li><a href="">Glee is awesome 1</a></li>
<li><a href="">Glee is awesome 2</a></li>
<li><a href="">Glee is awesome 3</a></li>
<li><a href="">Glee is awesome 4</a></li>
<li><a href="">Glee is awesome 5</a></li>
<li><a href="">Glee is awesome 6</a></li>
<li><a href="">Glee is awesome 7</a></li>
<li><a href="">Glee is awesome 8</a></li>
<li><a href="">Glee is awesome 9</a></li>
<li><a href="">Glee is awesome 10</a></li>
<li><a href="">Glee is awesome 11</a></li>
<li><a href="">Glee is awesome 12</a></li>
<li><a href="">Glee is awesome 13</a></li>
<li><a href="">Glee is awesome 14</a></li>
<li><a href="">Glee is awesome 15</a></li>
<li><a href="">Glee is awesome 16</a></li>
<li><a href="">Glee is awesome 17</a></li>
<li><a href="">Glee is awesome 18</a></li>
<li><a href="">Glee is awesome 19</a></li>
<li><a href="">Glee is awesome 20</a></li>
</ul>
다음 예제를 살펴보면 고정 너비 열을 사용하며 이것이 요청 된 동작이라고 생각합니다.
http://www.vanderlee.com/martijn/demo/column/
하단 예가 상단과 동일하면 jquery 열 플러그인이 필요하지 않습니다.
ul{margin:0; padding:0;}
#native {
-webkit-column-width: 150px;
-moz-column-width: 150px;
-o-column-width: 150px;
-ms-column-width: 150px;
column-width: 150px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
-o-column-rule-style: solid;
-ms-column-rule-style: solid;
column-rule-style: solid;
}
<div id="native">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>
</div>
Thank you for this example, SPRBRN. It helped me. And I can suggest the mixin, which I've used based on the code given above:
//multi-column-list( fixed columns width)
@mixin multi-column-list($column-width, $column-rule-style) {
-webkit-column-width: $column-width;
-moz-column-width: $column-width;
-o-column-width: $column-width;
-ms-column-width: $column-width;
column-width: $column-width;
-webkit-column-rule-style: $column-rule-style;
-moz-column-rule-style: $column-rule-style;
-o-column-rule-style: $column-rule-style;
-ms-column-rule-style: $column-rule-style;
column-rule-style: $column-rule-style;
}
Using:
@include multi-column-list(250px, solid);
Create a list with as many list elements as you want. Then enclose the list in a div, setting style=column-width and style=column-gap, to match the information in your list elements. Do not set style=columns. Totally responsive list that adapts to screen size. No plugins required.
You can do that using CSS3.
Here is the HTML code snippet:
<ul id="listitem_ascolun">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
& Here is the CSS3 code snippet :
#listitem_ascolun ul{margin:0;padding:0;list-style:none;}
#listitem_ascolun {
height: 500px;
column-count: 4;
-webkit-column-count: 4;
-moz-column-count: 4;
}
#listitem_ascolun li {
display: inline-block;
}
Use column-width property of css like below
<ul style="column-width:135px">
참고URL : https://stackoverflow.com/questions/12332528/how-to-display-list-items-as-columns
'Program Tip' 카테고리의 다른 글
이 사용자가 익명인지 또는 실제로 내 시스템의 사용자인지 어떻게 확인합니까? (0) | 2020.11.27 |
---|---|
Java에서 소수점 이하 두 자리로 반올림하는 방법은 무엇입니까? (0) | 2020.11.27 |
Python의 numpy ndarray에서 비 NaN 요소 수 계산 (0) | 2020.11.27 |
값을 대문자 또는 소문자로 변경하는 SQL (0) | 2020.11.27 |
Perl에서 해시 참조와 해시 참조의 차이점은 무엇입니까? (0) | 2020.11.27 |