programing

정렬되지 않은 목록을 두 개의 열에 표시하는 방법은 무엇입니까?

itmemos 2023. 8. 5. 09:54
반응형

정렬되지 않은 목록을 두 개의 열에 표시하는 방법은 무엇입니까?

다음 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 열 모듈을 활용하여 원하는 것을 지원합니다.

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 지원을 위해서는 자바스크립트와 돔 조작을 포함하는 코드 솔루션이 필요합니다.즉, 목록의 내용이 변경될 때마다 목록을 열로 재정렬하고 다시 인쇄하는 작업을 수행해야 합니다.아래 솔루션은 간결함을 위해 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>

JavaScript:

(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

E

그러나 해결책으로 받아들여진 답은 다음과 같습니다.

AD

있다

C

답이 틀리거나 질문이 틀립니다.

은 매우간해당폭신것설다입의 너비를 입니다.<ul> 여러분의 ▁of▁the▁width▁your다▁and▁set▁and▁then▁float.<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 수정 포함).

결과를 , 이제며칠, 예는결위해를과,display:grid;가장 쉬운 방법은 다음과 같습니다.

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

또한 열을 왼쪽에서 축소하고 다른 너비를 가질 수 있습니다.

ul {
  display: grid;
  grid-template-columns: repeat(2, auto);
  justify-content: start;
}

li {
  margin-left: 1em;
  border: solid 1px;/*see me */
}
<ul>
  <li>A</li>
  <li>B</li>
  <li>C 123456</li>
  <li>D</li>
  <li>E</li>
</ul>

최신 브라우저용 솔루션이 마음에 들지만 글머리 기호가 빠져 있어 약간의 트릭을 추가합니다.

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

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


li:before {
  content: "• ";
}

enter image description here

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

스니펫:

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>

이것은 부모 div의 column-count css 속성을 사용하여 달성할 수 있습니다.

맘에 들다

 column-count:2;

자세한 내용은 여기를 참조하십시오.

부동 DIV 목록을 행이 아닌 열에 표시하는 방법

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

AE

B

C

D

 <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;
 }

과 잘 하면,justify a grid 평배치가 레이아웃gap.

p {
  text-align: justify;
}

ul {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: space-around;
  gap: 0 3em;
  text-transform: capitalize;
}
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
  <li>ten</li>
</ul>
<p>In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</p>

예를 들어 jQuery-Columns 플러그인을 사용하면 .mylist 클래스로 ul을 분할할 수 있습니다.

$('.mylist').cols(2);

다음은 jsfiddle에 대한 실시간 예제입니다.

저는 CSS 솔루션보다 이것이 더 좋습니다. 왜냐하면 CSS 솔루션에서는 모든 것이 상단에 수직으로 정렬되지 않기 때문입니다.

몇 년 후에 더 많은 하나의 대답!

다음 기사에서: http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

HTML:

<ul id="double"> <!-- Alter ID accordingly -->
  <li>CSS</li>
  <li>XHTML</li>
  <li>Semantics</li>
  <li>Accessibility</li>
  <li>Usability</li>
  <li>Web Standards</li>
  <li>PHP</li>
  <li>Typography</li>
  <li>Grids</li>
  <li>CSS3</li>
  <li>HTML5</li>
  <li>UI</li>
</ul>

CSS:

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%;}
#triple li  { width:33.333%; }
#quad li    { width:25%; }
#six li     { width:16.666%; }

updateColumns()필요하다.if (column >= columns.length)if (column > columns.length)모든 요소를 나열합니다(예: C는 생략).

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

http://jsfiddle.net/e2vH9/1/

부트스트랩 사용...이 답변(https://stackoverflow.com/a/23005046/1128742) 을 통해 이 솔루션에 대해 알게 되었습니다.

<ul class="list-unstyled row">
   <li class="col-xs-6">Item 1</li>
   <li class="col-xs-6">Item 2</li>
   <li class="col-xs-6">Item 3</li>
</ul>

http://jsfiddle.net/patrickbad767/472r0ynf/

페이지의 여러 목록에 영향을 주고 싶었기 때문에 상위 답변의 기존 솔루션은 효과가 없었습니다. 이 답변은 단일 목록과 글로벌 상태를 사용하는 것으로 가정했습니다.이 경우에 나는 내부의 모든 목록을 변경하고 싶었습니다.<section class="list-content">:

const columns = 2;
$("section.list-content").each(function (index, element) {
    let section = $(element);
    let items = section.find("ul li").detach();
    section.find("ul").detach();
    for (let i = 0; i < columns; i++) {
        section.append("<ul></ul>");
    }
    let lists = section.find("ul");
    for (let i = 0; i < items.length; i++) {
        lists.get(i % columns).append(items[i]);
    }
});

이것은 나에게 효과가 있었습니다. 왜냐하면 연속된 셀들은 내용물을 관리하지 않고 같은 높이를 가지고 있기 때문입니다.

ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); 
  list-style-position: inside;
  list-style-type: none;
}
li {  border: solid 1px; }
<ul>
  <li>asdasd asdad asdasd asdasd adasdasdasd adasdadadada adadas dasdadasdasd asd aA</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
</ul>

가브리엘이 작업에 대한 답을 어느 정도 찾았지만 목록을 수직으로 주문하려고 할 때 다음을 발견했습니다(첫 번째 ul A-D 및 두 번째 ul E-G).

  • 울이 짝수개의 리를 가지고 있을 때, 울의 리를 가로질러 고르게 펴지지 않았습니다.
  • UL의 데이터 열을 사용하는 것은 잘 작동하지 않는 것처럼 보였고, 3개의 열에 4개를 넣어야 했고, 심지어는 여전히 JS에 의해 생성된 UL의 2개에만 Li를 퍼뜨리고 있었습니다.

위와 같은 일이 일어나지 않도록 JQuery를 수정했습니다.

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

    $(setupColumns);
})(jQuery);

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="customcolumns" data-columns="3">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
    <li>H</li>
    <li>I</li>
    <li>J</li>
    <li>K</li>
    <li>L</li>
    <li>M</li>
  </ul>
</div>

여기 단순한 CSS 이상을 사용하여 다중 열 목록을 만드는 쉬운 방법이 있습니다.원하는 경우 스타일 태그를 CSS에 넣을 수 있습니다.

<p>Materials List</p>
<ul style="display: inline-block; float: left">
    <u>Item Description<u>
    <li>1/2" x 4' wood dowel</li>
    <li>1/2" x 12"  PVC pipe</li>
    <li>1/2" PVC pipe end cap</li>
    <li>7/16" x 3" light duty expansion spring</li>
    <li>6" plastic zip ties</li>
    <li>Light weight antenna</li>
</ul>
<div style="display: inline-block; margin-left: 1em">
    <u>Qty</u>
    <div style="text-indent: 0.5em">3</div>
    <div style="text-indent: 0.5em">1</div>
    <div style="text-indent: 0.5em">1</div>
    <div style="text-indent: 0.5em">2</div>
    <div style="text-indent: 0.5em">8</div>
    <div style="text-indent: 0.5em">1</div>
</div>
<p></p>

이 d는 수년간 찾아본 저에게 완벽한 솔루션이었습니다.

http://css-tricks.com/forums/topic/two-column-unordered-list/

언급URL : https://stackoverflow.com/questions/14745297/how-to-display-an-unordered-list-in-two-columns

반응형

'programing' 카테고리의 다른 글

MySQL을 사용하여 소수점(경도, 위도)으로 변환  (0) 2023.08.05
bower 명령을 찾을 수 없음  (0) 2023.08.05
Objective-C의 취약하고 강력한 속성 설정자 속성  (0) 2023.08.05
이 jQuery click 기능이 작동하지 않는 이유는 무엇입니까?  (0) 2023.08.05
중간에 단어가 있는 수평선에 대한 CSS 기법  (0) 2023.08.05

'programing'의 다른글

  • 현재글정렬되지 않은 목록을 두 개의 열에 표시하는 방법은 무엇입니까?

관련글

댓글

티스토리툴바