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; // Or whatever padding your font size needs
}
이는 허용된 답변과 동일한 결과입니다. https://jsfiddle.net/5wxf2ayu/
스크린샷:
이 fiddle을 확인합니다.
수동으로 들여쓰기하는 방법을 보여줍니다.ul그리고.olCSS를 사용합니다.
HTML
<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>
</html>
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;
}
다음과 같은 CSS가 효과를 발휘했습니다.
ul {
margin-left: 1em;
}
li {
list-style-position: outside;
padding-left: 0.5em;
}
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/
패딩 밖에 '탄' 리스트만 넣어주시면 될 것 같아요.
li {
list-style-position: outside;
padding-left: 1em;
}
제 솔루션은 Pumbaa80의 솔루션과 동일하지만, 사용을 제안합니다.display: tabledisplay: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;
}
ol, ullists는 당신이 원한다면 당신은 css에 none이라는 테두리가 있는 테이블을 사용할 수 있습니다.
CSS는 "리스트 스타일 위치"에 대해 내부와 외부의 두 가지 값만을 제공합니다."내부"의 경우 두 번째 선은 상위 선이 아닌 목록 점과 동일합니다.
순서가 매겨진 목록에서 개입 없이 "list-style-position"에 "inside" 값을 지정하면 긴 목록 항목의 두 번째 줄은 들여쓰기가 없지만 목록의 왼쪽 가장자리로 돌아갑니다(즉, 항목 번호와 왼쪽 정렬됨).이것은 순서가 매겨진 목록에 고유한 것이며 순서가 매겨진 목록에서는 발생하지 않습니다.
대신 "list-style-position"에 "outside" 값을 지정하면 두 번째 줄은 첫 번째 줄과 같은 들여쓰기를 갖게 됩니다.
저는 테두리가 있는 목록을 가지고 있었는데 이런 문제가 있었습니다."list-style-position"이 "inside"로 설정된 상태에서, 제 리스트는 제가 원하는 것처럼 보이지 않았습니다.그러나 "list-style-position"을 "outside"로 설정하면 목록 항목의 수가 상자 밖에 떨어집니다.
저는 전체 목록을 오른쪽으로 밀어 다시 이전 위치로 되돌리는 왼쪽 여백을 전체 목록에 더 크게 설정함으로써 이 문제를 해결했습니다.
CSS:
ol.클래스 이름 {margin:0;padding:0;}
ol.classnameli {margin:0.5em 000; padding-left:0;list-style-position:outside;}
HTML:
<ol class="classname" style="margin:0 0 0 1.5em;">
네, 제가 돌아가서 몇 가지를 알아냈어요.이것은 제가 제안했던 것에 대한 대략적인 해결책이지만, 기능적인 것 같습니다.
우선, 숫자들을 순서 없이 일련의 목록으로 만들었습니다.정렬되지 않은 목록은 일반적으로 각 목록 항목의 맨 앞에 디스크가 있습니다(
그런 다음 전체 목록을 테이블 행으로 표시했습니다.여기, 내가 그 일에 대해 지껄이지 말고 그냥 코드를 붙여넣는 게 어때요?
<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가 인라인 블록으로 표시되도록 할 수 있습니다.이것은 그들을 잘 정리해 놓았습니다.
여백은 마침표와 본문의 시작 사이에 공백을 두는 것입니다.그렇지 않으면, 그들은 서로 바로 부딪쳐 눈엣가시처럼 보입니다.
제 고용주는 왼쪽 여백이 아니라 첫 줄의 시작과 함께 줄을 이을(긴 서지적 항목의 경우) 랩어라운드 텍스트를 원했습니다.원래 저는 양의 여백과 음의 텍스트 들여쓰기로 만지작거렸지만, 두 개의 다른 디브로 바꾸었을 때, 이것이 텍스트가 모두 줄을 이루도록 하는 효과가 있다는 것을 깨달았습니다. 왜냐하면 디브의 왼쪽 여백은 텍스트가 자연스럽게 시작되는 여백이기 때문입니다.따라서 공간을 추가하기 위해 필요한 것은 0.2em 여유였고, 다른 모든 것들은 수영하듯 정렬되었습니다.
만약 OP가 비슷한 문제를 가지고 있다면 도움이 될 것입니다.나는 그/그녀를 이해하는 데 어려움을 겪었습니다.
저도 이와 같은 문제가 있어서 user123444555621의 답변을 사용하기 시작했습니다.하지만, 저는 또한 추가할 필요가 있었습니다.padding그리고.border각자에게li, 그 해결책이 허용하지 않는 이유는 각각의 이유 때문입니다.li가table-row.
일단 우리는 a를 사용합니다.counter복제하다ol의 수.
우리는 그 다음에 설정합니다.display: table;각각li그리고.display: table-cell에서:before우리에게 들여보내기 위해서입니다.
마지막으로 까다로운 부분.전체적으로 테이블 배치를 사용하지 않기 때문에ol우리는 각각을 확인할 필요가 있습니다.:before같은 폭입니다.단위를 사용하여 대략적으로 글자 수와 같은 폭을 유지할 수 있습니다.숫자의 숫자를 사용할 때 폭을 균일하게 유지하기 위해: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>언급URL : https://stackoverflow.com/questions/10428720/how-to-keep-indent-for-second-line-in-ordered-lists-via-css
'programing' 카테고리의 다른 글
| JQuery를 사용하여 HTML 5 동영상 재생/일시정지 (0) | 2023.09.20 |
|---|---|
| 이미 멤셋 등이 있는데 ZeroMemory 등이 존재하는 이유는 무엇입니까? (0) | 2023.09.20 |
| 인쇄방법인쇄방법XDocument 사용XDocument 사용 (0) | 2023.09.20 |
| Oracle: 올바른 월이 아님 (0) | 2023.09.20 |
| 자리 표시자와 대체 개체를 사용하여 자바스크립트 문자열을 포맷하시겠습니까? (0) | 2023.09.20 |