วิธีการเยื้องสำหรับบรรทัดที่สองในรายการสั่งซื้อผ่าน 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" - ทั้งภายในและภายนอก ด้วยบรรทัดที่สอง "Inside" จะล้างออกด้วยจุดรายการที่ไม่ใช่บรรทัดที่เหนือกว่า:

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

ความกว้าง "นอก" รายการของฉันไม่ได้ล้างด้วยบล็อคข้อความที่เหนือกว่าอีกต่อไป

การทดสอบความกว้างของข้อความการเยื้อง, padding-left และ margin-left สำหรับรายการที่ไม่ได้เรียงลำดับ แต่ล้มเหลวสำหรับรายการที่เรียงลำดับเนื่องจากขึ้นอยู่กับจำนวนอักขระในรายการทศนิยม

 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 
— kernfrucht
แหล่งที่มา
1
Pali Madraผู้ใช้เพิ่มสิ่งนี้เป็นคำตอบ แต่ได้ถูกลบเนื่องจากไม่มีคำอธิบายเพิ่มเติม เขาบอกว่า jsfiddle อาจเป็นสิ่งที่คุณกำลังมองหา: jsfiddle.net/palimadra/CZuXY/1
— bfavaretto
พยายามตั้งค่า padding-left เท่านั้น ...
— 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สัญกรณ์ดั้งเดิมกับหนึ่งโคลอน

— user123444555621
แหล่งที่มา
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/

ป้อนคำอธิบายรูปภาพที่นี่

— JTOrlando
แหล่งที่มา
21
ดีกว่าถ้าคุณเพิ่ม padding-left: 1em;
— Bence Gacsályi
16
นี่คือคำตอบที่ดีที่สุดของโซลูชันทั้งหมดในหน้านี้ สะดวกกว่าคนอื่นมาก หากคุณลังเลที่จะเลือกคำตอบให้เลือกอันนี้
— Valentin Mercier
25
@loremmonkey นี่เร็วและสกปรก แต่ไม่ใช่ทางออกที่แท้จริง ก่อนอื่น1emไม่เท่ากับช่องว่างของการเยื้อง เส้นจะไม่จัดแนวพิกเซลอย่างสมบูรณ์แบบ ประการที่สองสิ่งที่เกี่ยวกับเมื่อรายการถึงหมายเลข 10? 100? การเยื้องข้อความไม่ทำงานมันจะไม่ถูกจัดแนว คำตอบนี้ควรจะลงคะแนน
— Sunny
1
@Sunny มันเป็นรายการแผ่นดิสก์ที่ไม่ได้เป็นหมายเลขดังนั้นทำไมนับถึง 100 ฉันไม่เห็นปัญหาใด ๆ กับรายการของฉันโดยใช้รหัสด้านบน
— ลิง lorem
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/

ภาพหน้าจอ:

ป้อนคำอธิบายรูปภาพที่นี่

— Chuck Le Butt
แหล่งที่มา
1
คุณอาจจะต้องนำไปใช้ในการlist-style-position: outside <li>
— อเล็กซ์
@Alex คุณควรทำเช่นนี้หากคุณบังคับให้เขียนทับสไตล์ที่มีอยู่ ( developer.mozilla.org/en/docs/Web/CSS/list-style-position )
— Chuck Le Butt
25

ตรวจสอบซอนี้:

http://jsfiddle.net/K6bLp/

มันแสดงวิธีการเยื้อง ul และ ol ด้วยตนเองโดยใช้ CSS

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/

จดบันทึกมัน

— Deepan Babu
แหล่งที่มา
ขอบคุณมันใช้งานได้ดีสำหรับ 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หรือulใน CSS

ol {
margin-left: 0;
padding-left: 3em;
list-style-position: outside;
}
— luke2012
แหล่งที่มา
โชคไม่ดีที่ปัญหาไม่ได้รับการแก้ไขด้วยวิธีนี้: บรรทัดที่สองจะล้างออกด้วยจุดรายการที่ไม่กว้างแถวที่เหนือกว่าดูตัวอย่างด้านบน
— kernfrucht
11 และ 12 ในjsfiddle.net/j7MEd/1ขึ้นบรรทัดด้านบนและย่อหน้าด้านล่างและฉันไม่ได้เปลี่ยนรหัส ฉันพลาดอะไรไปรึเปล่า?
— luke2012
ไม่นั่นไม่ใช่ประเด็น ปัญหาหลักคือว่าบรรทัดที่สอง (และสาม ฯลฯ ... ) ของแต่ละรายการจุดไม่เหมือนกัน "เยื้อง" เหมือนบรรทัดแรก! (ดูตัวอย่าง jsfiddle) ในคำถามของฉันข้างต้นฉันคิดถึงวิธีแก้ปัญหาด้วยการเติมเต็มส่วนต่าง ฯลฯ แต่ใช้ได้กับรายการที่ไม่เรียงลำดับเท่านั้น ในรายการสั่งปัญหาใหม่เช่นนี้เกิดขึ้น 11/12 ดังนั้นคำถามหลักของฉัน: ฉันจะได้รับการเยื้องสิ่ง (เช่นฉันนำเสนอในตัวอย่างแรกของการทดสอบของฉัน) ทำสำหรับรายการสั่งซื้อโดยไม่มีปัญหาเช่นสิ่ง 11/12
— kernfrucht
โอเคขอโทษที่ได้ยา! นี่เป็นวิธีหนึ่ง .. ปัญหาเดียวคือเพื่อให้เกิดการข้ามเบราว์เซอร์คุณจะต้องตั้งค่าระยะขอบใน IE และ padding ใน Firefox jsfiddle.net/j7MEd/2
— luke2012
7

ฉันเชื่อว่าคุณเพียงแค่ต้องใส่ 'กระสุน' รายการนอกช่องว่างภายใน

li {
    list-style-position: outside;
    padding-left: 1em;
}
— KnownColor
แหล่งที่มา
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/

— LaFaucon
แหล่งที่มา
4

วิธีการแก้ปัญหาของฉันคือมากเช่นเดียวกับPumbaa80หนึ่ง 's แต่ฉันขอแนะนำให้ใช้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's

— อเล็กซ์
แหล่งที่มา
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;
}
— Corey Ballou
แหล่งที่มา
ปัญหาขนาดตัวอักษรเท่านั้น
— atilkan
0

รายการ ol, ul จะทำงานถ้าคุณต้องการคุณสามารถใช้ตารางที่มีเส้นขอบ: ไม่มีใน css

— Casualbot
แหล่งที่มา
ฉันคิดว่านี่ไม่ใช่วิธีแก้ปัญหาที่ดีเกี่ยวกับกฎ semantic
— kernfrucht
0

CSS มีเพียงสองค่าสำหรับ "list-style-position" - ทั้งภายในและภายนอก ด้วยบรรทัดที่สอง "Inside" จะล้างออกด้วยจุดรายการที่ไม่ใช่บรรทัดที่เหนือกว่า:

ในรายการที่เรียงลำดับโดยไม่มีการแทรกแซงหากคุณให้ "list-style-position" ค่า "ข้างใน" บรรทัดที่สองของรายการที่มีความยาวจะไม่มีการเยื้อง แต่จะกลับไปที่ขอบซ้ายของรายการ (เช่น จะจัดชิดซ้ายกับหมายเลขของรายการ) นี่เป็นเรื่องแปลกสำหรับรายการที่เรียงลำดับแล้วและจะไม่เกิดขึ้นในรายการที่ไม่มีการเรียงลำดับ

หากคุณให้ "list-style-position" ค่า "นอก" แทนบรรทัดที่สองจะมีการเยื้องเหมือนกับบรรทัดแรก

ฉันมีรายการที่มีชายแดนและมีปัญหานี้ ด้วย "list-style-position" set เป็น "inside" รายการของฉันไม่เหมือนที่ฉันต้องการ แต่ด้วย "list-style-position" ตั้งค่าเป็น "นอก" ตัวเลขของรายการจะอยู่นอกกรอบ

ฉันแก้ไขสิ่งนี้โดยเพียงแค่ตั้งระยะห่างให้กว้างขึ้นสำหรับรายการทั้งหมดซึ่งผลักรายการทั้งหมดไปทางขวากลับสู่ตำแหน่งที่เคยเป็นมาก่อน

CSS:

ol.classname {margin: 0; padding: 0;}

ol.classname li {margin: 0.5em 0 0 0; padding-left: 0; list-style-position: outside;}

HTML:

<ol class="classname" style="margin:0 0 0 1.5em;">
— คริส
แหล่งที่มา
-1

ตกลงฉันกลับไปแล้วคิดหาบางสิ่งออกมา นี่คือวิธีแก้ปัญหาที่หยาบคายกับสิ่งที่ฉันเสนอ แต่ดูเหมือนว่าจะใช้งานได้

ก่อนอื่นฉันทำให้ตัวเลขเป็นรายการที่ไม่มีลำดับ รายการที่ไม่เรียงลำดับตามปกติจะมีแผ่นดิสก์ที่จุดเริ่มต้นของแต่ละรายการ

  • ) ดังนั้นคุณต้องตั้งค่า CSS เป็น list-style: none;

    จากนั้นฉันแสดงรายการทั้งหมด: แถวตาราง ที่นี่ทำไมฉันไม่เพียงวางรหัสคุณแทนที่จะพูดพล่ามเกี่ยวกับเรื่องนี้?

    <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 ที่ 2 กับตัวเลขในรายการที่เรียงลำดับใน div แรก ฉันล้อมรอบทั้งรายการและข้อความด้วยแท็กเพื่อที่ฉันจะได้บอกให้ div ทั้งหมดแสดงเป็นบล็อกอินไลน์ สิ่งนี้ทำให้พวกเขาเป็นอย่างดี

    ระยะขอบจะมีการเว้นช่องว่างระหว่างจุดและจุดเริ่มต้นของข้อความ มิฉะนั้นพวกมันจะวิ่งไปชนกันและดูเหมือนว่าจะมีอาการปวดตา

    นายจ้างของฉันต้องการข้อความที่ล้อมรอบ (สำหรับรายการบรรณานุกรมที่ยาวกว่า) เพื่อให้สอดคล้องกับการเริ่มต้นของบรรทัดแรกไม่ใช่ระยะขอบซ้าย เดิมทีฉันกำลังรำลึกถึงขอบบวกและข้อความเชิงลบเยื้อง แต่แล้วฉันก็ตระหนักว่าเมื่อฉันเปลี่ยนไปใช้ div สองอันที่แตกต่างกันสิ่งนี้มีผลในการทำให้ข้อความทั้งหมดเรียงกันเพราะขอบซ้ายของ div คือระยะขอบซึ่งข้อความเริ่มขึ้นเองตามธรรมชาติ ดังนั้นสิ่งที่ฉันต้องการก็คืออัตรากำไรขั้นต้น 0.2em เพื่อเพิ่มพื้นที่บางส่วนและทุกอย่างอื่นเรียงกันว่ายน้ำ

    ฉันหวังว่านี่จะช่วยได้ถ้า OP มีปัญหาคล้ายกัน ... ฉันมีเวลาทำความเข้าใจเขา / เธอ

    • — เดวิด
    แหล่งที่มา
    -1

    ฉันมีปัญหาเดียวกันนี้และเริ่มใช้คำตอบของ user123444555621 แต่ผมยังต้องเพิ่มpaddingและborderให้แต่ละliซึ่งวิธีการแก้ปัญหาที่ไม่อนุญาตให้เพราะแต่ละเป็นlitable-row

    อันดับแรกเราใช้ a counterเพื่อทำซ้ำolตัวเลข

    จากนั้นเราจะกำหนดdisplay: table;ในแต่ละliและdisplay: table-cellใน:beforeที่จะให้เราเยื้อง

    ในที่สุดส่วนที่ยุ่งยาก เนื่องจากเราไม่ได้ใช้เค้าโครงตารางทั้งหมดolเราจึงต้องตรวจสอบให้แน่ใจว่าแต่ละ:beforeแบบมีความกว้างเท่ากัน เราสามารถใช้chหน่วยในการรักษาความกว้างโดยประมาณเท่ากับจำนวนอักขระ เพื่อที่จะให้ความกว้างเครื่องแบบเมื่อจำนวนของตัวเลขสำหรับที่:before's แตกต่างกันเราสามารถใช้คำสั่งปริมาณ สมมติว่าคุณรู้ว่ารายการของคุณจะไม่เป็น 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.