CSS: ควบคุมพื้นที่ระหว่างสัญลักษณ์แสดงหัวข้อย่อยและ <li>

ฉันต้องการที่จะควบคุมเท่าใดพื้นที่แนวกระสุนผลักดันให้มัน<li>ไปทางขวาในหรือ<ol><ul>

นั่นคือแทนที่จะมีเสมอ

*  Some list text goes
   here.

ฉันต้องการที่จะเปลี่ยนเป็น

*         Some list text goes
          here.

หรือ

*Some list text goes
 here.

ฉันมองไปรอบ ๆ แต่สามารถหาคำแนะนำในการขยับบล็อกทั้งซ้ายหรือขวาตัวอย่างเช่นhttp://www.alistapart.com/articles/taminglists/

ใส่เนื้อหาในspanซึ่งอยู่ในตำแหน่งที่ค่อนข้างแล้วคุณสามารถควบคุมพื้นที่โดยทรัพย์สินของleftspan

li span {
  position: relative;
  left: -10px;
}

<ul>
  <li><span>item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3</span></li>
</ul>

เพื่อสรุปคำตอบอื่น ๆ ที่นี่ - หากคุณต้องการควบคุมช่องว่างระหว่างสัญลักษณ์แสดงหัวข้อย่อยและข้อความใน<li>รายการอย่างละเอียดตัวเลือกของคุณคือ:

(1) ใช้ภาพพื้นหลัง:

<style type="text/css">
li {
    list-style-type:none;
    background-image:url(bullet.png);
}
</style>

<ul>
    <li>Some text</li>
</ul>

ข้อดี:

• คุณสามารถใช้ภาพใดก็ได้ที่คุณต้องการสำหรับสัญลักษณ์แสดงหัวข้อย่อย
• คุณสามารถใช้ CSS background-positionเพื่อจัดตำแหน่งภาพได้ทุกที่ที่คุณต้องการเมื่อเทียบกับข้อความโดยใช้พิกเซล, ems หรือ%

ข้อเสีย:

• เพิ่มไฟล์ภาพพิเศษ (แม้ว่าจะเล็ก) ลงในหน้าของคุณเพิ่มน้ำหนักหน้า
• หากผู้ใช้เพิ่มขนาดตัวอักษรในเบราว์เซอร์สัญลักษณ์แสดงหัวข้อจะยังคงขนาดเดิม นอกจากนี้ยังมีแนวโน้มที่จะได้รับตำแหน่งไกลออกไปเมื่อขนาดตัวอักษรเพิ่มขึ้น
• หากคุณกำลังพัฒนาเลย์เอาต์ที่ 'ตอบสนอง' โดยใช้เปอร์เซ็นต์ความกว้างเท่านั้นอาจเป็นเรื่องยากที่จะรับสัญลักษณ์แสดงตำแหน่งที่คุณต้องการในช่วงความกว้างของหน้าจอ

2. ใช้ช่องว่างภายใน<li>แท็ก

<style type="text/css">
ul {padding-left:1em}
li {padding-left:1em}
</style>

<ul>
    <li>Some text</li>
</ul>

ข้อดี:

• ไม่มีภาพ = ไฟล์ที่จะดาวน์โหลดน้อย 1 ไฟล์
• โดยการปรับช่องว่างภายในบน<li>คุณสามารถเพิ่มพิเศษได้มากพื้นที่แนวนอนระหว่างกระสุนและข้อความตามที่คุณต้องการ
• หากผู้ใช้เพิ่มขนาดข้อความระยะห่างและสัญลักษณ์แสดงหัวข้อควรปรับสัดส่วน

ข้อเสีย:

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

(3) ตัดข้อความใน<span>องค์ประกอบเพิ่มเติม

<style type="text/css">
li {
    padding-left:1em;
    color:#f00; /* red bullet */
}
li span {
    display:block;
    margin-left:-0.5em;
    color:#000; /* black text */
}
</style>

<ul>
    <li><span>Some text</span></li>
</ul>

ข้อดี:

• ไม่มีภาพ = ไฟล์ที่จะดาวน์โหลดน้อย 1 ไฟล์
• คุณสามารถควบคุมตำแหน่งของกระสุนได้มากกว่าด้วยตัวเลือก (2) - คุณสามารถเลื่อนไปใกล้กับข้อความมากขึ้น (แม้ว่าจะมีความพยายามอย่างดีที่สุดของฉันดูเหมือนว่าคุณไม่สามารถเปลี่ยนตำแหน่งแนวตั้งได้โดยการเพิ่มpadding-topไปที่<span>คนอื่นอาจมี. วิธีแก้ปัญหาสำหรับสิ่งนี้แม้ว่า ... )
• สัญลักษณ์แสดงหัวข้อย่อยอาจเป็นสีที่แตกต่างกับข้อความ
• หากผู้ใช้เพิ่มขนาดตัวอักษรสัญลักษณ์แสดงหัวข้อควรปรับสัดส่วน (ให้คุณตั้งค่าช่องว่างภายใน & ขอบเป็น EMS ไม่ใช่ px)

ข้อเสีย:

• ต้องใช้องค์ประกอบที่ไม่เป็นที่ต้องการ (ซึ่งอาจทำให้คุณเสียเพื่อนไปมากกว่านั้นในชีวิตจริง) แต่มันน่ารำคาญสำหรับผู้ที่ชอบรหัสของพวกเขาจะมีประสิทธิภาพและเป็นไปได้น้อยที่สุดและเป็นการละเมิดการนำเสนอและเนื้อหา HTML / CSS ที่ควรเสนอ)
• ไม่มีการควบคุมขนาดและรูปร่างของกระสุน

นี่คือความหวังสำหรับฟีเจอร์สไตล์ลิสต์ใหม่ใน CSS4 ดังนั้นเราจึงสามารถสร้างสัญลักษณ์แสดงหัวข้อย่อยที่ชาญฉลาดโดยไม่ต้องใช้รูปภาพหรือมาร์กอัป :)

สิ่งนี้ควรทำ อย่าลืมตั้งกระสุนของคุณไปด้านนอก คุณยังสามารถใช้องค์ประกอบ CSS หลอกถ้าคุณสามารถวางพวกเขาใน IE7 ลง ฉันไม่แนะนำให้ใช้องค์ประกอบหลอกสำหรับสิ่งนี้ แต่มันทำงานเพื่อควบคุมระยะทาง

ul {
  list-style: circle outside;
  width: 100px;
}

li {
  padding-left: 40px;
}

.pseudo,
.pseudo ul {
  list-style: none;
}

.pseudo li {
  position: relative;
}

/* use ISO 10646 for content http://la.remifa.so/unicode/named-entities.html */
.pseudo li:before {
  content: '\2192';
  position: absolute;
  left: 0;
}

<ul>
  <li>Any Browser really</li>
  <li>List item
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

<ul class="pseudo">
  <li>IE8+ only</li>
  <li>List item
    <ul>
      <li>List item with two lines of text for the example.</li>
      <li>List item</li>
    </ul>
  </li>
</ul>

คำถามเก่า แต่: ก่อนองค์ประกอบหลอกทำงานได้ดีที่นี่

<style>
    li:before {
        content: "";
        display: inline-block;
        height: 1rem;  // or px or em or whatever
        width: .5rem;  // or whatever space you want
    }
</style>

มันใช้งานได้ดีจริง ๆ และไม่ต้องการกฎหรือ html เพิ่มเติมมากมาย

<ul>
    <li>Some content</li>
    <li>Some other content</li>
</ul>

ไชโย!

สำหรับlist-style-type: inline :

มันเกือบจะเหมือนกันกับคำตอบของ DSMann8 แต่น้อย css code

คุณเพียงแค่ต้อง

<style>
    li:before {
        content: "";
        padding-left: 10px;
    }
</style>

<ul>
    <li>Some content</li>
</ul>

ไชโย

คุณสามารถใช้แอpadding-leftททริบิวในรายการ ( ไม่ใช่ในรายการ!)

การใช้การเยื้องข้อความบน li ทำได้ดีที่สุด

เยื้องข้อความ: -x px; จะย้ายกระสุนให้เข้าใกล้ li และในทางกลับกัน

การใช้ความสัมพันธ์เมื่อขยายระยะทางด้านซ้ายเชิงลบอาจทำงานไม่ถูกต้องกับ IE เวอร์ชันเก่า PS- หลีกเลี่ยงการให้ตำแหน่งมากที่สุดเท่าที่จะทำได้

นี่เป็นอีกวิธีการแก้ปัญหาโดยใช้องค์ประกอบ css เคาน์เตอร์และหลอก ฉันคิดว่ามันสวยงามกว่าเพราะไม่ต้องใช้มาร์กอัป html หรือ css พิเศษ:

ol,
ul {
    list-style-position: inside;
}

li {
    list-style-type: none;
}

ol {
    counter-reset: ol; //reset the counter for every new ol
}

ul li:before {
        content: '\2022 \00a0 \00a0 \00a0'; //bullet unicode followed by 3 non breakable spaces
}

ol li:before {
        counter-increment: ol;
        content: counter(ol) '.\00a0 \00a0 \00a0'; //css counter followed by a dot and 3 non breakable spaces
}

ฉันใช้ช่องว่างที่ไม่สามารถแยกได้เพื่อให้ระยะห่างมีผลกับบรรทัดแรกขององค์ประกอบรายการของฉันเท่านั้น (หากองค์ประกอบรายการมีความยาวมากกว่าหนึ่งบรรทัด) คุณสามารถใช้ช่องว่างภายในที่นี่แทน

คำถามเก่า แต่ยังเกี่ยวข้อง text-indentผมขอแนะนำให้ใช้ในเชิงลบ จะต้องเป็นlist-style-positionoutside

ข้อดี:

• กระสุนอยู่ในตำแหน่งที่ถูกต้องโดยอัตโนมัติ
• เปลี่ยนขนาดตัวอักษรไม่ทำลายตำแหน่งสัญลักษณ์แสดงหัวข้อย่อย
• ไม่มีองค์ประกอบเพิ่มเติม (ไม่มี :: องค์ประกอบหลอกด้วย)
• ใช้ได้กับทั้ง RTL และ LTR โดยไม่มีการเปลี่ยนแปลงใน CSS

จุดด้อย:

• ลอง
• ถึง
• หา
• หนึ่ง :)

รายการที่ไม่เรียงลำดับเริ่มต้นด้วยแท็ก ul แต่ละรายการในรายการเริ่มต้นด้วยรายการในรายการจะถูกทำเครื่องหมายด้วยสัญลักษณ์แสดงหัวข้อย่อย (วงกลมสีดำขนาดเล็ก) โดยค่าเริ่มต้น:

    <!DOCTYPE html>
    <html>
       <body>
          <h2>Normal List </h2>
          <ul>
             <li>Coffee</li>
             <li>Tea</li>
             <li>Milk</li>
          </ul>
       </body>
    </html>

เอาท์พุท:

<!DOCTYPE html>
<html>
<body>

<h2>Normal List </h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

</body>
</html>

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

<ul style='text-indent: -7px;'>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

ดูเหมือนว่าคุณสามารถ (ค่อนข้าง) ควบคุมระยะห่างโดยใช้การเติมบนแท็ก <li>

<style type="text/css">
    li { padding-left: 10px; }
</style>

สิ่งที่จับได้คือมันดูเหมือนจะไม่อนุญาตให้คุณขยี้มันอย่างสบาย ๆ เหมือนเป็นตัวอย่างสุดท้ายของคุณ

สำหรับสิ่งที่คุณสามารถลองปิด list-style-type และการใช้ & bull;

<ul style="list-style-type: none;">
    <li>&bull;Some list text goes here.</li>
</ul>

ดูเหมือนว่าจะมีวิธีแก้ปัญหาที่สะอาดกว่าถ้าคุณต้องการลดระยะห่างระหว่างสัญลักษณ์แสดงหัวข้อย่อยและข้อความ:

li:before {
    content: "";
    margin-left: -0.5rem;
}

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

ดูคำตอบของคำถามนี้

ul
{
list-style-position:inside;
} 

ความหมายและการใช้งาน

คุณสมบัติ list-style-position ระบุว่าตัวทำเครื่องหมายรายการควรปรากฏภายในหรือภายนอกการไหลของเนื้อหา

ที่มา: http://www.w3schools.com/cssref/pr_list-style-position.asp

คุณสามารถใช้ul li:beforeและภาพพื้นหลังและกำหนดposition: relativeและposition:absoluteให้กับliและli:beforeตามลำดับ วิธีนี้คุณสามารถสร้างภาพและจัดวางตำแหน่งได้ทุกที่ที่คุณต้องการเทียบกับ li

ใช้padding-left:1em; text-indent:-1emสำหรับ<li>แท็ก
จากนั้นlist-style-position: insideสำหรับ<ul>แท็ก

<ul style='list-style-position: inside;'>
  <li style='padding-left: 1em; text-indent: -1em;'>Item 1</li>
</ul>

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

margin-right ช่วยให้คุณสามารถย้ายข้อความเข้าใกล้สัญลักษณ์แสดงหัวข้อย่อย

text-indent ทำให้แน่ใจว่าข้อความหลายบรรทัดยังคงเรียงกันอย่างถูกต้อง

li:before {
  content: "";
  margin-right: -5px; /* Adjust this to move text closer to the bullet */
}

li {
  text-indent: 5px; /* Aligns second line of text */
}

<ul>
  <li> Item 1 ... </li>
  <li> Item 2 ... this item has tons and tons of text that causes a second line! Notice how even the second line is lined up with the first!</li>
  <li> Item 3 ... </li>
</ul>

ใช้ในแต่ละ<span style="display: flex;"><li>