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

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

예 :

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.”.

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

답변

최신 정보

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

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하나의 콜론으로 레거시 표기법을 사용하십시오 .

답변

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

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

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

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

답변

해킹없이 가장 쉽고 깨끗한 방법은 다음과 같이 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/

스크린 샷 :

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

답변

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

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/

기록해 두십시오.

답변

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

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}

답변

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

li {
    list-style-position: outside;
    padding-left: 1em;
}

답변

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/