CSS를 통해 정렬 된 목록에서 두 번째 줄에 들여 쓰기를 유지하는 방법은 무엇입니까?
목록 글 머리 기호 또는 십진수가 모두 우수한 텍스트 블록으로 플러시되는 "내부"목록을 원합니다. 목록 항목의 두 번째 줄은 첫 번째 행과 같은 들여 쓰기를 가져야합니다!
예 :
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는 "목록 스타일 위치"에 대해 내부 및 외부의 두 가지 값만 제공합니다. "내부"를 사용하면 두 번째 줄이 상위 줄이 아닌 목록 포인트와 동일합니다.
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;
list-style-position: outside;
}
이것은 허용 된 답변과 동일한 결과를 제공합니다 : https://jsfiddle.net/af2fqryz/
스크린 샷 :
이 바이올린을 확인하십시오 :
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;
}
또한 당신의 바이올린을 편집
메모 해 두십시오.
당신은 마진과 하나의 패딩 설정할 수 있습니다 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/
내 솔루션은 매우 동일 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의 간격에 여백을 사용할 수 있습니다.
나는이 솔루션을 좋아한다.
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;
}
다음 CSS가 트릭을 수행했습니다.
ul{
margin-left: 1em;
}
li{
list-style-position: outside;
padding-left: 0.5em;
}
ol, ul 목록은 경계가있는 테이블을 사용할 수도 있습니다 .css에 none이 있습니다.
CSS는 "목록 스타일 위치"에 대해 내부 및 외부의 두 가지 값만 제공합니다. "내부"를 사용하면 두 번째 줄이 상위 줄이 아닌 목록 포인트와 동일합니다.
정렬 된 목록에서 개입없이 "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;">
좋아, 나는 돌아가서 몇 가지를 알아 냈습니다. 이것은 내가 제안한 것에 대한 견고한 솔루션이지만 기능적인 것 같습니다.
먼저 숫자를 일련의 정렬되지 않은 목록으로 만들었습니다. 순서가없는 목록은 일반적으로 각 목록 항목의 시작 부분에 디스크를 갖습니다 (
그런 다음 전체 목록을 표시했습니다 : 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가 비슷한 문제를 겪고 있다면 이것이 도움이되기를 바랍니다 ... 나는 그를 이해하는 데 어려움을 겪었습니다.
나는이 같은 문제가 있었고 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>'IT story' 카테고리의 다른 글
| iOS 시뮬레이터를 시작할 때 Bluetooth 헤드폰 음악 품질이 저하됩니다 (0) | 2020.04.10 |
|---|---|
| 리눅스`find`로 파일 이름 만 얻는 방법? (0) | 2020.04.10 |
| Maven이 의존성을 target / lib에 복사하도록 강제 (0) | 2020.04.10 |
| Angular의 HTTP 요청에 URL 인수 (쿼리 문자열)를 전달하는 방법은 무엇입니까? (0) | 2020.04.10 |
| Android에서 TextView에 줄 바꿈을 어떻게 추가합니까? (0) | 2020.04.10 |