คุณจะปรับแต่งตัวเลขในรายการสั่งซื้อได้อย่างไร?

Question 1

ฉันจะจัดเรียงตัวเลขไปทางซ้ายในรายการสั่งซื้อได้อย่างไร?

1.  an item
// skip some items for brevity 
9.  another item
10. notice the 1 is under the 9, and the item contents also line up

เปลี่ยนตัวอักษรหลังตัวเลขในรายการสั่งซื้อ?

1) an item

นอกจากนี้ยังมีโซลูชัน CSS ในการเปลี่ยนจากตัวเลขเป็นรายการตามตัวอักษร / โรมันแทนการใช้แอตทริบิวต์ type ในองค์ประกอบ ol

ฉันสนใจคำตอบที่ใช้ได้กับ Firefox 3 เป็นส่วนใหญ่

Question 2

นี่คือโซลูชันที่ฉันใช้งานได้ใน Firefox 3, Opera และ Google Chrome รายการยังคงแสดงใน IE7 (แต่ไม่มีวงเล็บปิดและหมายเลขจัดชิดซ้าย):

ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  display: block;
  margin-bottom: .5em;
  margin-left: 2em;
}
li::before {
  display: inline-block;
  content: counter(item) ") ";
  counter-increment: item;
  width: 2em;
  margin-left: -2em;
}

<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine<br>Items</li>
  <li>Ten<br>Items</li>
</ol>

ขยายข้อมูลโค้ด

แก้ไข:รวมการแก้ไขหลายบรรทัดโดย strager

นอกจากนี้ยังมีโซลูชัน CSS ในการเปลี่ยนจากตัวเลขเป็นรายการตามตัวอักษร / โรมันแทนการใช้แอตทริบิวต์ type ในองค์ประกอบ ol

อ้างถึงคุณสมบัติ CSS ประเภทลิสต์ หรือเมื่อใช้ตัวนับอาร์กิวเมนต์ที่สองยอมรับค่าประเภทรายการสไตล์ ตัวอย่างเช่นต่อไปนี้จะใช้โรมันบน:

li::before {
  content: counter(item, upper-roman) ") ";
  counter-increment: item;
/* ... */

Question 3

CSS สำหรับรายการสไตล์อยู่ที่นี่แต่โดยพื้นฐานแล้ว:

li {
    list-style-type: decimal;
    list-style-position: inside;
}

อย่างไรก็ตามเลย์เอาต์เฉพาะที่คุณต้องการสามารถทำได้โดยการเจาะลึกเข้าไปในส่วนในของเลย์เอาต์ด้วยสิ่งนี้ (โปรดทราบว่าฉันยังไม่ได้ลองใช้):

ol { counter-reset: item }
li { display: block }
li:before { content: counter(item) ") "; counter-increment: item }

Question 4

คุณยังสามารถระบุตัวเลขของคุณเองใน HTML ได้เช่นหากฐานข้อมูลให้ตัวเลข:

ol {
  list-style: none;
}

ol>li:before {
  content: attr(seq) ". ";
}

<ol>
  <li seq="1">Item one</li>
  <li seq="20">Item twenty</li>
  <li seq="300">Item three hundred</li>
</ol>

ขยายข้อมูลโค้ด

seqแอตทริบิวต์ที่ถูกทำให้มองเห็นโดยใช้วิธีการเดียวกับที่ได้รับในคำตอบอื่น ๆ แต่แทนที่จะใช้content: counter(foo)เราใช้content: attr(seq).

สาธิตใน CodePen พร้อมรูปแบบที่มากขึ้น

Question 5

ขโมยสิ่งนี้จำนวนมากจากคำตอบอื่น ๆ แต่มันใช้งานได้ใน FF3 สำหรับฉัน มีการupper-romanเยื้องสม่ำเสมอวงเล็บปิด

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<style type="text/css">
<!--
ol {
  counter-reset: item;
  margin-left: 0;
  padding-left: 0;
}
li {
  margin-bottom: .5em;
}
li:before {
  display: inline-block;
  content: counter(item, upper-roman) ")";
  counter-increment: item;
  width: 3em;
}
-->
</style>
</head>

<body>
<ol>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ol>
</body>
</html>

Question 6

ฉันขอแนะนำให้เล่นกับแอตทริบิวต์: before และดูว่าคุณสามารถทำอะไรได้บ้าง หมายความว่าโค้ดของคุณ จำกัด เฉพาะเบราว์เซอร์ใหม่ ๆ ที่ดีและไม่รวมส่วน (ใหญ่น่ารำคาญ) ของตลาดที่ยังใช้เบราว์เซอร์เก่าที่เป็นขยะ

สิ่งต่อไปนี้ซึ่งบังคับให้แก้ไขกับรายการ ใช่ฉันรู้ว่าการเลือกความกว้างด้วยตัวเองนั้นดูสง่างามน้อยกว่า แต่การใช้ CSS สำหรับเลย์เอาต์ของคุณก็เหมือนกับงานตำรวจนอกเครื่องแบบ: แรงจูงใจของคุณดีแค่ไหนก็มักจะยุ่งเหยิง

li:before {
  content: counter(item) ") ";
  counter-increment: item;
  display: marker;
  width: 2em;
}

แต่คุณจะต้องทดลองเพื่อหาคำตอบที่แน่นอน

Question 7

ตัวเลขจะเรียงกันได้ดีขึ้นหากคุณเพิ่มเลขศูนย์นำหน้าให้กับตัวเลขโดยตั้งค่าประเภทรายการเป็น:

ol { list-style-type: decimal-leading-zero; }

Question 8

HTML5: ใช้`value`แอตทริบิวต์ (ไม่จำเป็นต้องใช้ CSS)

เบราว์เซอร์สมัยใหม่จะตีความvalueแอตทริบิวต์และจะแสดงผลตามที่คุณคาดหวัง โปรดดูเอกสาร MDN

<ol>
  <li value="3">This is item three.</li>
  <li value="50">This is item fifty.</li>
  <li value="100">This is item one hundred.</li>
</ol>

ขยายข้อมูลโค้ด

นอกจากนี้ยังมีลักษณะที่บทความเกี่ยวกับ MDNโดยเฉพาะอย่างยิ่งเอกสารสำหรับและแอตทริบิวต์<ol>start

Question 9

ยืมและปรับปรุงคำตอบมาร์คัสดาวนิง ผ่านการทดสอบและใช้งานได้ใน Firefox 3 และ Opera 9 รองรับหลายบรรทัดด้วย

ol {
    counter-reset: item;
    margin-left: 0;
    padding-left: 0;
}

li {
    display: block;
    margin-left: 3.5em;          /* Change with margin-left on li:before.  Must be -li:before::margin-left + li:before::padding-right.  (Causes indention for other lines.) */
}

li:before {
    content: counter(item) ")";  /* Change 'item' to 'item, upper-roman' or 'item, lower-roman' for upper- and lower-case roman, respectively. */
    counter-increment: item;
    display: inline-block;
    text-align: right;
    width: 3em;                  /* Must be the maximum width of your list's numbers, including the ')', for compatability (in case you use a fixed-width font, for example).  Will have to beef up if using roman. */
    padding-right: 0.5em;
    margin-left: -3.5em;         /* See li comments. */
}

Question 10

มีแอตทริบิวต์ Typeที่ช่วยให้คุณสามารถเปลี่ยนรูปแบบการกำหนดหมายเลขได้อย่างไรก็ตามคุณไม่สามารถเปลี่ยนเครื่องหมายหยุดเต็มหลังตัวเลข / ตัวอักษรได้

<ol type="a">
    <li>Turn left on Maple Street</li>
    <li>Turn right on Clover Court</li>
</ol>

Question 11

เอกสารกล่าวถึง list-style-position: outside

CSS1 ไม่ได้ระบุตำแหน่งที่แน่นอนของกล่องเครื่องหมายและด้วยเหตุผลของความเข้ากันได้ CSS2 ยังคงคลุมเครือไม่แพ้กัน สำหรับการควบคุมกล่องมาร์กเกอร์ที่แม่นยำยิ่งขึ้นโปรดใช้เครื่องหมาย

ถัดไปในหน้านั้นเป็นข้อมูลเกี่ยวกับเครื่องหมาย

ตัวอย่างหนึ่งคือ:

       LI:before { 
           display: marker;
           content: "(" counter(counter) ")";
           counter-increment: counter;
           width: 6em;
           text-align: center;
       }

Question 12

ไม่ ... เพียงแค่ใช้ DL:

dl { overflow:hidden; }
dt {
 float:left;
 clear: left;
 width:4em; /* adjust the width; make sure the total of both is 100% */
 text-align: right
}
dd {
 float:left;
 width:50%; /* adjust the width; make sure the total of both is 100% */
 margin: 0 0.5em;
}

Question 13

ฉันมีมัน ลองทำดังต่อไปนี้:

<html>
<head>
<style type='text/css'>

    ol { counter-reset: item; }

    li { display: block; }

    li:before { content: counter(item) ")"; counter-increment: item; 
        display: inline-block; width: 50px; }

</style>
</head>
<body>
<ol>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
    <li>Something</li>
</ol>
</body>

จับเป็นว่านี้แน่นอนจะไม่ทำงานบนเบราว์เซอร์รุ่นเก่าหรือสอดคล้องน้อย: display: inline-blockเป็นที่พักใหม่มาก

Question 14

โซลูชันทางเลือกที่รวดเร็วและสกปรก คุณสามารถใช้อักขระการจัดรูปแบบร่วมกับข้อความที่จัดรูปแบบไว้ล่วงหน้า นี่คือความเป็นไปได้:

<style type="text/css">
ol {
    list-style-position: inside;
}
li:first-letter {
    white-space: pre;
}
</style>

และ html ของคุณ:

<ol>
<li>    an item</li>
<li>    another item</li>
...
</ol>

โปรดทราบว่าช่องว่างระหว่างliแท็กและการขอทานของข้อความเป็นอักขระการจัดตาราง (สิ่งที่คุณจะได้รับเมื่อคุณกดแป้นแท็บภายในแผ่นจดบันทึก)

หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าคุณสามารถดำเนินการนี้แทนได้:

<style type="text/css">
ol {
    list-style-position: inside;
}
</style>

<ol>
    <li><pre>   </pre>an item</li>
    <li><pre>   </pre>another item</li>
    ...
</ol>

Question 15

คำตอบอื่น ๆ ดีกว่าจากมุมมองของแนวคิด อย่างไรก็ตามคุณสามารถพิมพ์ตัวเลขด้านซ้ายด้วยจำนวน "& ensp;" ที่เหมาะสม เพื่อให้พวกเขาเข้าแถว

*หมายเหตุ: ในตอนแรกฉันไม่ทราบว่ามีการใช้รายการลำดับเลข ฉันคิดว่ารายการนี้ถูกสร้างขึ้นอย่างชัดเจน

Question 16

ฉันจะให้คำตอบที่ฉันมักจะไม่ชอบอ่าน แต่ฉันคิดว่าเนื่องจากมีคำตอบอื่น ๆ ที่บอกคุณว่าจะบรรลุสิ่งที่คุณต้องการได้อย่างไรจึงเป็นการดีที่จะคิดใหม่ว่าสิ่งที่คุณพยายามจะบรรลุนั้นเป็นจริงหรือไม่ ความคิดที่ดี.

ขั้นแรกคุณควรคิดว่าหากเป็นความคิดที่ดีที่จะแสดงรายการในลักษณะที่ไม่ได้มาตรฐานโดยมีอักขระตัวคั่นแตกต่างจากที่ให้มา

ฉันไม่รู้เหตุผล แต่สมมติว่าคุณมีเหตุผลที่ดี

วิธีที่นำเสนอที่นี่เพื่อให้บรรลุซึ่งประกอบด้วยการเพิ่มเนื้อหาลงในมาร์กอัปของคุณโดยส่วนใหญ่จะผ่าน CSS: ก่อน pseudoclass เนื้อหานี้กำลังแก้ไขโครงสร้าง DOM ของคุณโดยเพิ่มรายการเหล่านั้นเข้าไป

เมื่อคุณใช้ตัวเลข "ol" มาตรฐานคุณจะมีเนื้อหาที่แสดงผลซึ่งสามารถเลือกข้อความ "li" ได้ แต่ไม่สามารถเลือกตัวเลขที่อยู่ข้างหน้าได้ นั่นคือระบบเลขมาตรฐานดูเหมือนจะเป็นการ "ตกแต่ง" มากกว่าเนื้อหาจริง หากคุณเพิ่มเนื้อหาสำหรับตัวเลขโดยใช้เช่นวิธีการ ": before" เหล่านั้นเนื้อหานี้จะสามารถเลือกได้และดำเนินการกับสิ่งนี้ดำเนินการปัญหา vopy / paste ที่ไม่ต้องการหรือปัญหาการเข้าถึงได้กับโปรแกรมอ่านหน้าจอที่จะอ่านเนื้อหา "ใหม่" นี้เพิ่มเติม ไปยังระบบตัวเลขมาตรฐาน

บางทีวิธีอื่นอาจเป็นการจัดรูปแบบตัวเลขโดยใช้รูปภาพแม้ว่าทางเลือกนี้จะทำให้เกิดปัญหาขึ้นเอง (ตัวเลขไม่แสดงเมื่อปิดใช้งานรูปภาพขนาดข้อความสำหรับตัวเลขไม่เปลี่ยนแปลง ... )

อย่างไรก็ตามเหตุผลสำหรับคำตอบนี้ไม่ได้เป็นเพียงการเสนอทางเลือก "ภาพ" นี้ แต่เพื่อให้ผู้คนคิดถึงผลที่ตามมาของการพยายามเปลี่ยนระบบตัวเลขมาตรฐานสำหรับรายการที่เรียงลำดับ

Question 17

รหัสนี้ทำให้รูปแบบการกำหนดหมายเลขเหมือนกับส่วนหัวของเนื้อหา li

<style>
    h4 {font-size: 18px}
    ol.list-h4 {counter-reset: item; padding-left:27px}
    ol.list-h4 > li {display: block}
    ol.list-h4 > li::before {display: block; position:absolute;  left:16px;  top:auto; content: counter(item)"."; counter-increment: item; font-size: 18px}
    ol.list-h4 > li > h4 {padding-top:3px}
</style>

<ol class="list-h4">
    <li>
        <h4>...</h4>
        <p>...</p> 
    </li>
    <li>...</li>
</ol>

คุณจะปรับแต่งตัวเลขในรายการสั่งซื้อได้อย่างไร?

HTML5: ใช้valueแอตทริบิวต์ (ไม่จำเป็นต้องใช้ CSS)

HTML5: ใช้`value`แอตทริบิวต์ (ไม่จำเป็นต้องใช้ CSS)