[html] 순서가없는 목록을 두 열로 표시하는 방법은 무엇입니까?

Html / 글쓴이

다음 HTML에서 목록을 두 개의 열로 표시하는 가장 쉬운 방법은 무엇입니까?

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

원하는 디스플레이 :

A B
C D
E

솔루션은 Internet Explorer에서 작동 할 수 있어야합니다.

답변

최신 브라우저

css3 columns 모듈을 사용하여 원하는 것을 지원하십시오.

http://www.w3schools.com/cssref/css3_pr_columns.asp

CSS :

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

http://jsfiddle.net/HP85j/8/

레거시 브라우저

불행히도 IE 지원을 위해서는 JavaScript 및 dom 조작과 관련된 코드 솔루션이 필요합니다. 즉, 목록의 내용이 변경 될 때마다 목록을 열로 다시 정렬하고 다시 인쇄하기위한 작업을 수행해야합니다. 아래 솔루션은 간결성을 위해 jQuery를 사용합니다.

http://jsfiddle.net/HP85j/19/

HTML :

<div>
    <ul class="columns" data-columns="2">
        <li>A</li>
        <li>B</li>
        <li>C</li>
        <li>D</li>
        <li>E</li>
        <li>F</li>
        <li>G</li>
    </ul>
</div>

자바 스크립트 :

(function($){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1; // account for initial column
    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx !== 0 && idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }
    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    $(function(){
        setupColumns();
        updateColumns();
    });
})(jQuery);

CSS :

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

편집하다:

아래에서 지적했듯이 다음과 같이 열을 정렬합니다.

A  E
B  F
C  G
D

OP는 다음과 일치하는 변형을 요청했습니다.

A  B
C  D
E  F
G

변형을 수행하려면 코드를 다음과 같이 변경하면됩니다.

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

답변

나는 작동하는 @jaider의 솔루션을보고 있었지만 작업하기가 더 쉽고 브라우저에서 좋은 것으로 보인 약간 다른 접근법을 제공하고 있습니다.

ul{
    list-style-type: disc;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    list-style-position: inside;//this is important addition
}

기본적으로 정렬되지 않은 목록은 외부에 글 머리 기호 위치를 표시하지만 일부 브라우저에서는 웹 사이트 레이아웃 방식에 따라 일부 표시 문제가 발생할 수 있습니다.

형식으로 표시하려면 :

A B
C D
E

등을 사용하십시오 :

ul li{
    float: left;
    width: 50%;//helps to determine number of columns, for instance 33.3% displays 3 columns
}
ul{
    list-style-type: disc;
}

열 표시와 관련된 모든 문제를 해결해야합니다. 귀하의 답변이이 사실을 발견하도록 안내하는 데 도움을 주신 @jaider에게 감사드립니다.

답변

이것을 의견으로 게시하려고 시도했지만 질문에 따라 열을 올바르게 표시하지 못했습니다.

당신은 요구하고 있습니다 :

AB

CD

이자형

…하지만 해결책으로 받아 들여진 대답은 다음과 같습니다.

기원 후

있다

씨

… 답이 맞지 않거나 질문이 맞습니다.

매우 간단한 해결책은 너비를 설정 <ul>한 다음 <li>항목 을 띄우고 너비를 설정하는 것입니다.

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul{
    width:210px;
}
li{
    background:green;
    float:left;
    height:100px;
    margin:0 10px 10px 0;
    width:100px;
}
li:nth-child(even){
    margin-right:0;
}

예를 들어 http://jsfiddle.net/Jayx/Qbz9S/1/

질문이 잘못되면 이전 답변이 적용됩니다 (IE 지원이 부족한 경우 JS 수정).

답변

최신 브라우저의 솔루션이 마음에 들지만 글 머리 기호가 누락되어 있으므로 약간의 트릭을 추가하십시오.

http://jsfiddle.net/HP85j/419/

ul {
    list-style-type: none;
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}


li:before {
  content: "• ";
}

여기에 이미지 설명을 입력하십시오

답변

가능한 해결책은 다음과 같습니다.

단편:

ul {
  width: 760px;
  margin-bottom: 20px;
  overflow: hidden;
  border-top: 1px solid #ccc;
}
li {
  line-height: 1.5em;
  border-bottom: 1px solid #ccc;
  float: left;
  display: inline;
}
#double li {
  width: 50%;
}
<ul id="double">
  <li>first</li>
  <li>second</li>
  <li>third</li>
  <li>fourth</li>
</ul>

스 니펫 확장

그리고 그것은 끝났습니다.
3 열의 경우 li너비를 33 %로 사용 하고 4 열의 경우 25 % 등을 사용하십시오.

답변

가장 간단한 방법입니다. CSS 만.

  1. ul 요소에 너비를 추가하십시오.
  2. 표시 추가 : 인라인 블록 및 새 열의 너비 (ul 너비의 절반보다 작아야 함)
ul.list {
  width: 300px;
}

ul.list li{
  display:inline-block;
  width: 100px;
}
<ul class="list">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

스 니펫 확장

답변

CSS 만 사용 하여 두 개 이상의 열을 설정할 수 있습니다

AE

비

씨

디

 <ul class="columns">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ul>

ul.columns  {
   -webkit-columns: 60px 2;
   -moz-columns: 60px 2;
    columns: 60px 2;
   -moz-column-fill: auto;
   column-fill: auto;
 }