CSS를 통해 정렬 된 목록에서 두 번째 줄에 들여 쓰기를 유지하는 방법은 무엇입니까?

260

목록 글 머리 기호 또는 십진수가 모두 우수한 텍스트 블록으로 플러시되는 "내부"목록을 원합니다. 목록 항목의 두 번째 줄은 첫 번째 행과 같은 들여 쓰기를 가져야합니다!

예 :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor. Aenean Aenean massa. 
Cum sociis natoque penatibus et magnis dis parturient montes, 
nascetur ridiculus mus. Donec quam felis,

1. Text
2. Text
3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
   second line of longer Text
4. Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
Aenean commodo ligula eget dolor.

CSS는 "list-style-position"에 대해 내부 및 외부의 두 가지 값만 제공합니다. "내부"를 사용하면 두 번째 줄이 상위 줄이 아닌 목록 포인트와 동일합니다.

3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
second line of longer Text
4. Text

너비 "외부"내 목록이 더 이상 우수한 텍스트 블록으로 플러시되지 않습니다.

정렬되지 않은 목록의 경우 텍스트 들여 쓰기, 왼쪽 여백 및 왼쪽 여백을 실험하지만 목록 10 진수의 문자 수에 따라 순서가 지정된 목록에서는 실패합니다.

 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
 Aenean commodo ligula eget dolor. 

 3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
 4. Text
11. Text
12. Text

"11." 그리고 "12." "3"에 비해 우수한 텍스트 블록으로 플러시되지 않습니다. 그리고 "4.".

주문 목록과 두 번째 줄 들여 쓰기에 대한 비밀은 어디에 있습니까? 노력해 주셔서 감사합니다!

html  css  html-lists 
— 커 렌트 루 흐트
소스
1
사용자 Pali Madra 가 이것을 답변으로 추가했지만 더 이상 설명을 포함하지 않아 삭제되었습니다. : 그는 jsfiddle 당신이 찾고있는 무슨 일 수있다 jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
padding-left only만을 설정해보십시오.
— matzone
3
누군가 "기본 목록 들여 쓰기"를 찾고있는이 질문을 우연히 발견 한 경우이 질문 ( stackoverflow.com/questions/17556496/… )과 Natasha Banegas의 답변을 살펴보십시오 .
— SunnyRed
하나의 답변이 실제 질문을 다루지 않습니다. 실제 질문은 목록의 숫자를 왼쪽으로 정렬하는 방법과 텍스트가 두 번째 또는 그 이상의 행으로 넘칠 때 목록 항목의 텍스트를 위의 항목 텍스트와 별도로 왼쪽 정렬하는 방법입니다. 기본적으로 그리고 거의 모든 답변에서 목록의 숫자는 오른쪽으로 정렬되고 목록 항목의 텍스트는 왼쪽으로 정렬됩니다.
— Jessie Westlake

답변:

267

최신 정보

이 답변은 구식입니다. 아래의 다른 답변에서 지적 했듯이이 작업을 훨씬 간단하게 수행 할 수 있습니다.

ul {
  list-style-position: outside;
}

https://www.w3schools.com/cssref/pr_list-style-position.asp를 참조 하십시오

원래 답변

이 문제가 아직 해결되지 않은 것을보고 놀랐습니다. 다음과 같이 브라우저의 테이블 레이아웃 알고리즘 (테이블을 사용하지 않고)을 사용할 수 있습니다.

ol {
    counter-reset: foo;
    display: table;
}

ol > li {
    counter-increment: foo;
    display: table-row;
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell; /* aha! */
    text-align: right;
}

데모 : http://jsfiddle.net/4rnNK/1/

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

IE8에서 작동하게하려면 :before하나의 콜론으로 레거시 표기법을 사용하십시오 .

— 사용자 123444555621
소스
2
@Perelli foo는 임의의 문자열 (id)이며 counter-reset, counter-increment및 counter()속성 을 연결하는 데 사용됩니다 .
— user123444555621
3
또한 사용하여 남았습니다 테이블 물건을 피할 수 position: relative온 <li>과 position: absolute생성 된 내용에. 예제는 jsfiddle.net/maryisdead/kgr4k 를 참조하십시오 .
— maryisdead
2
@maryisdead 왜 40px? 카운터가 그보다 더 넓 으면 고장날 것입니다 . 테이블 레이아웃 사용의 요점은 브라우저가 내용에 자동으로 맞춰진다는 것입니다.
— user123444555621
5
훌륭하지만 <li> 아래쪽 여백을 어떻게 제어합니까? <li>의 높이는 테이블 셀 요소의 높이에 의해서만 결정됩니다. 따라서 해당 요소의 여백, 패딩 및 높이는 영향을 미치지 않습니다. 이 제한을 해결하는 방법은 무엇입니까?
— hschmieder
3
여러 줄의 목록 항목이 있고 일관된 세로 간격이 필요한 경우 해결책은 세로 선택 간격을 ol 선택기에 추가하는 것입니다 (예 : 테두리 간격 : 0 3px; 숫자가 항상 한 줄이므로 테이블 셀의 일반 패딩이 작동하지 않습니다.
— RemBem
207

나는 이것이 당신이 찾고있는 것을 할 것이라고 믿습니다.

.cssClass li {
    list-style-type: disc;
    list-style-position: inside;
    text-indent: -1em;
    padding-left: 1em;
}

JSFiddle : https://jsfiddle.net/dzbos70f/

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

— TO 란도
소스
21
padding-left를 추가하면 더 좋습니다 : 1em;
— Bence Gacsályi
16
이것은 지금까지이 페이지의 모든 솔루션에 대한 최상의 답변입니다. 다른 것보다 훨씬 편리합니다. 어떤 답변을 선택해야하는지 망설이는 경우이 답변을 선택하십시오.
— Valentin Mercier
25
@loremmonkey 이것은 빠르고 더럽지 만 실제 해결책은 아닙니다. 첫째, 1em들여 쓰기의 공간과 같지 않습니다. 선은 픽셀 단위로 완벽하게 정렬되지 않습니다. 둘째, 목록이 10에 도달하면 어떨까요? 100? 텍스트 들여 쓰기가 작동하지 않고 정렬되지 않습니다. 이 답변은 다운 투표되어야합니다.
— Sunny
1
@Sunny 번호가 매겨진 디스크 목록이 아니므로 왜 100으로 계산됩니까? 위의 코드를 사용하여 목록에 아무런 문제가 없습니다.
— lorem monkey 9
2
@loremmonkey 들여 쓰기가 없습니다 1em. oi60.tinypic.com/a0eyvs.jpg 첫 번째 목록 항목은 위의 텍스트 들여 쓰기 기술을 사용하고 있습니다. 일반적으로 list-style-position으로 보이는 방식과 비교할 때 :이 경우 픽셀 외부로 잘못 정렬됩니다.
— Sunny
39

해킹없이 가장 쉽고 깨끗한 방법은 다음과 같이 ul(또는 ol) 들여 쓰기하는 것입니다.

ol {
  padding-left: 40px; // Or whatever padding your font size needs
  list-style-position: outside; // OPTIONAL: Only necessary if you've set it to "inside" elsewhere
}

이것은 허용 된 대답과 동일한 결과를 제공합니다 : https://jsfiddle.net/5wxf2ayu/

스크린 샷 :

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

— 척 르 엉덩이
소스
1
당신은 적용해야 할 수도 있습니다 list-style-position: outside에 <li>.
— Alex
@Alex 기존 스타일을 덮어 쓰는 경우 ( developer.mozilla.org/en/docs/Web/CSS/list-style-position ) 에만이 작업을 수행하면됩니다 .
— 척 레 버트
25

이 바이올린을 확인하십시오 :

http://jsfiddle.net/K6bLp/

CSS를 사용하여 ul 및 ol를 수동으로 들여 쓰는 방법을 보여줍니다.

HTML

<head>
    <title>Lines</title>
</head>

<body>
    <ol type="1" style="list-style-position:inside;">
        <li>Text</li>
        <li>Text</li>
        <li >longer Text, longer Text, longer Text, longer Text    second line of longer Text        </li>
    </ol>  
    <br/>
    <ul>
        <li>Text</li>
        <li>Text</li>
        <li>longer Text, longer Text, longer Text, longer Text    second line of longer Text                </li>
    </ul>
</body>

CSS

ol 
{
    margin:0px;
    padding-left:15px;
}

ol li 
{
    margin: 0px;
    padding: 0px;
    text-indent: -1em;
    margin-left: 1em;
}

ul
{
    margin:0;
    padding-left:30px;
}

ul li 
{
    margin: 0px;
    padding: 0px;
    text-indent: 0.5em;
    margin-left: -0.5em;
}

또한 당신의 바이올린을 편집

http://jsfiddle.net/j7MEd/3/

기록해 두십시오.

— 디판 바부
소스
감사합니다. UL 및 OL 최대 9 개의 목록 항목에 적합합니다. 이것이 11 / 12-의 질문 너비에 설명 된 주요 문제입니다. 위의 예제에서 다른 기술을 사용하여 문제가 다르게 보이지만 문제의 핵심은 동일하게 유지됩니다. 소수점 목록에 하나 이상의 숫자가있는 경우 차이가 있습니다 (예 : 1, 11). 111.! CSS를 통해 반응하고 텍스트 들여 쓰기와 왼쪽 여백을 숫자 수로 조정할 수있는 지점이 없습니다.
— kernfrucht
ol (숫자 이상)의 두 번째 줄 들여 쓰기에 대해서는 CSS가 해결하지 못할 것이라고 생각합니다. 우리는 jquery로만 가야합니다.
— Deepan Babu
또한의 type속성 <ol>은 HTML 5에서 더 이상 사용되지 않는 것으로 나타납니다 style="list-style-type: ". 대신 사용하십시오 .
— AJ.
2
당신 중 21 명이 심각합니까? 이 작동하지 않습니다. 게시 한 후 코드를 변경했는지 확실하지 않습니다.
— JGallardo
9

당신은 마진과 하나의 패딩 설정할 수 있습니다 ol또는 ulCSS의를

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
소스
불행히도 문제는이 솔루션에 의해 해결되지 않는다 : 제 라인리스트 포인트 플러시 우수한 열 폭, 위의 예를 볼
— kernfrucht
jsfiddle.net/j7MEd/1의 11과 12 는 상단 및 하단 단락과 정렬되어 있으며 코드를 변경하지 않았습니다. 뭔가 빠졌습니까?
— luke2012
아니, 그게 요점이 아니다. 주요 문제는 각 목록 포인트의 두 번째 (및 세 번째 등) 행이 첫 번째 행과 같은 "들여 쓰기"되지 않았다는 것입니다! (jsfiddle-example 참조). 위의 질문에서 패딩, 여백 등의 해결 방법에 대해 생각하지만 UN 순서 목록에서만 작동합니다. 주문한 목록 에서이 11/12와 같은 새로운 문제가 발생합니다. 그래서 내 주요 질문은 : 11/12와 같은 문제없이 주문 목록에 대해 들여 쓰기를 어떻게 할 수 있습니까?
— kernfrucht
알았어 미안해! 이것은 한 가지 방법입니다. 문제는 크로스 브라우저를 얻는 것입니다. IE에서 여백을 설정하고 Firefox에서 패딩을 설정해야합니다. jsfiddle.net/j7MEd/2
— luke2012
7

패딩 외부에 '글 머리 기호'목록을 넣어야한다고 생각합니다.

li {
    list-style-position: outside;
    padding-left: 1em;
}
— 알려진 색상
소스
6

CSS를 사용하여 범위를 선택할 수 있습니다. 이 경우 목록 항목 1-9를 원합니다.

ol li:nth-child(n+1):nth-child(-n+9)

그런 다음 첫 번째 항목의 여백을 적절하게 조정하십시오.

ol li:nth-child(n+1):nth-child(-n+9) { margin-left: .55em; }
ol li:nth-child(n+1):nth-child(-n+9) em,
ol li:nth-child(n+1):nth-child(-n+9) span { margin-left: 19px; }

여기에서 실제로보십시오 : http://www.wortfm.org/wort-madison-charts-for-the-week-beginning-11192012/

— 라포 콘
소스
5

다음 CSS가 트릭을 수행했습니다.

ul{
    margin-left: 1em;
}

li{
    list-style-position: outside;
    padding-left: 0.5em;
}
— 이토 토 푸스
소스
4

내 솔루션은 매우 동일 Pumbaa80 의 하나,하지만 난 사용하는 것이 좋습니다 display: table대신 display:table-row위한 li요소입니다. 따라서 다음과 같습니다.

ol {
    counter-reset: foo; /* default display:list-item */
}

ol > li {
    counter-increment: foo;
    display: table; /* instead of table-row */
}

ol > li::before {
    content: counter(foo) ".";
    display: table-cell;
    text-align: right;
}

이제 사이 li의 간격에 여백을 사용할 수 있습니다.

— 알렉스
소스
1

나는이 솔루션을 좋아한다.

ul {
    list-style-position: inside;
    list-style-type: disc;
    font-size: 12px;
    line-height: 1.4em;
    padding: 0 1em;
}

ul li {
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    text-indent: -2em;
}
— 코리 발루
소스
유일한 글꼴 크기
— atilkan
0

ol, ul 목록은 경계가있는 테이블을 사용할 수도 있습니다 .css에 none이 있습니다.

— 캐쥬얼 봇
소스
나는 이것이 의미 규칙에 관한 좋은 해결책이 아니라고 생각
— kernfrucht
0

CSS는 "list-style-position"에 대해 내부 및 외부의 두 가지 값만 제공합니다. "내부"를 사용하면 두 번째 줄이 상위 줄이 아닌 목록 포인트와 동일합니다.

정렬 된 목록에서 개입없이 "list-style-position"값에 "inside"를 지정하면 긴 목록 항목의 두 번째 줄에는 들여 쓰기가 없지만 목록의 왼쪽 가장자리로 돌아갑니다 (예 : 항목 번호와 왼쪽 정렬됩니다). 이것은 순서가 지정된 목록에 고유하며 순서가없는 목록에서는 발생하지 않습니다.

대신 "list-style-position"값에 "outside"를 지정하면 두 번째 줄은 첫 번째 줄과 동일한 들여 쓰기를 갖습니다.

테두리가있는 목록이 있었고이 문제가있었습니다. "list-style-position"을 "inside"로 설정하면 내 목록이 원하는 것처럼 보이지 않습니다. 그러나 "list-style-position"이 "outside"로 설정되면 목록 항목의 수가 상자 밖으로 떨어졌습니다.

전체 목록에 대해 왼쪽 여백을 넓게 설정하여 전체 목록을 오른쪽으로 밀고 이전 위치로 되돌려 서이 문제를 해결했습니다.

CSS :

ol.classname {여백 : 0; 패딩 : 0;}

ol.classname li {여백 : 0.5em 0 0; 패딩-왼쪽 : 0; 목록 스타일 위치 : 외부;}

HTML :

<ol class="classname" style="margin:0 0 0 1.5em;">
— 크리스
소스
-1

좋아, 나는 돌아가서 몇 가지를 알아 냈습니다. 이것은 내가 제안한 것에 대한 견고한 솔루션이지만 기능적인 것 같습니다.

먼저 숫자를 일련의 정렬되지 않은 목록으로 만들었습니다. 순서가없는 목록은 일반적으로 각 목록 항목의 시작 부분에 디스크를 갖습니다 (

  • ) 따라서 CSS를 목록 스타일로 설정해야합니다. none;

    그런 다음 전체 목록을 표시했습니다 : table-row. 여기서 코드를 열지 않고 붙여 넣는 것이 어떻습니까?

    <html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <div><ul>
        <li>1.</li>
        <li><p>2.</p></li>
        <li>10.</li>
        <li><p>110.</p></li>
        <li>1000.</li>
    </ul>
    </div>
    <div>
        <p>Some author</p>
        <p>Another author</p>
        <p>Author #10</p>
        <p>Author #110</p>
        <p>The one thousandth author today will win a free i-Pod!!!! This line also wraps around so that we can see how hanging indents look.</p>
        </div>
</body>
</html>'

    CSS :

    ul li{
list-style: none;
display: table-row;
text-align: right;

    }

    div {
float: left;
display: inline-block;
margin: 0.2em;

    }

    이것은 두 번째 div의 텍스트를 첫 번째 div의 정렬 된 목록의 숫자와 정렬하는 것 같습니다. 목록과 텍스트를 모두 태그로 묶어 모든 div에 인라인 블록으로 표시하도록 지시 할 수 있습니다. 이것은 그들을 잘 정렬했습니다.

    마진은 마침표와 텍스트 시작 사이에 공백을두기위한 것입니다. 그렇지 않으면, 그들은 서로 맞서 뛰며 눈에 띄는 것처럼 보입니다.

    고용주는 왼쪽 여백이 아닌 첫 번째 줄의 시작 부분에 줄 바꿈 텍스트 (더 긴 성서 입력을 위해)를 원했습니다. 원래 나는 양의 여백과 음의 텍스트 들여 쓰기로 fidgeting했지만 두 개의 다른 div로 전환하면 div의 왼쪽 여백 때문에 텍스트가 모두 정렬되도록하는 효과가 있음을 깨달았습니다. 텍스트가 자연스럽게 시작된 여백이었습니다. 따라서 필요한 공간을 추가하기 위해 0.2em의 마진 만 있으면되고 나머지는 모두 수영으로 줄 지어있었습니다.

    OP가 비슷한 문제를 겪고 있다면 이것이 도움이되기를 바랍니다 ... 나는 그를 이해하는 데 어려움을 겪었습니다.

    • — 데이비드
    소스
    -1

    나는이 같은 문제가 있었고 user123444555621 's answer 사용하기 시작했다 . 그러나, 나는 또한 추가 할 필요 padding하고, border각각은 li각각 때문에, 그 해결책은 허용하지 않는 li입니다 table-row.

    먼저 a counter를 사용하여 ol의 숫자 를 복제합니다 .

    우리는 그 다음 설정 display: table;각 li과 display: table-cell온 :before우리에게 들여 쓰기를 제공 할 수 있습니다.

    마지막으로 까다로운 부분입니다. 전체적으로 테이블 레이아웃을 사용하지 않기 때문에 ol각각 :before의 너비가 같아야합니다. ch단위 를 사용하여 폭을 문자 수와 대략 동일하게 유지할 수 있습니다 . 의 자릿수가 :before다른 경우 너비를 균일하게 유지하기 위해 수량 쿼리를 구현할 수 있습니다 . 목록이 100 개 이상의 품목이 아니라고 가정하면 :before너비를 변경 하기 위해 수량 쿼리 규칙이 하나만 필요 하지만 더 쉽게 추가 할 수 있습니다.

    ol {
  counter-reset: ol-num;
  margin: 0;
  padding: 0;
}

ol li {
  counter-increment: ol-num;
  display: table;
  padding: 0.2em 0.4em;
  border-bottom: solid 1px gray;
}

ol li:before {
  content: counter(ol-num) ".";
  display: table-cell;
  width: 2ch; /* approximately two characters wide */
  padding-right: 0.4em;
  text-align: right;
}

/* two digits */
ol li:nth-last-child(n+10):before,
ol li:nth-last-child(n+10) ~ li:before {
  width: 3ch;
}

/* three digits */
ol li:nth-last-child(n+100):before,
ol li:nth-last-child(n+100) ~ li:before {
  width: 4ch;
}
    <ol>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur facere veniam saepe vel cumque, nobis quisquam! Velit maiores blanditiis cum in mollitia quas facere sint harum, officia laborum, amet vero!</li>
</ol>
    스 니펫 확장

    — 제이콥 알바레즈
    소스
    당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
    Licensed under cc by-sa 3.0 with attribution required.