เส้นประสไตล์รายการ HTML

222

มีวิธีสร้าง list-style ใน HTML ด้วยขีดกลาง (เช่น - หรือ - –หรือ - —) หรือไม่

<ul>
  <li>abc</li>
</ul>

การแสดงผล:

- abc

มันเกิดขึ้นกับฉันที่จะทำสิ่งนี้ด้วยสิ่งต่างli:before { content: "-" };ๆ แม้ว่าฉันจะไม่ทราบข้อเสียของตัวเลือกนั้น

โดยทั่วไปฉันจะไม่ทราบวิธีการใช้อักขระทั่วไปสำหรับรายการ

— Brian M. Hunt
แหล่งที่มา

79

เนื่องจากมีการใช้เครื่องหมายขีดกลางในรายการเหตุใดจึงไม่รวมอยู่ในค่าเริ่มต้นใน css

— temirbek

101

ที่สำคัญกว่านี้ทำไมจึงมีหมายเลขอาร์เมเนียและคาตาคานะ ... แต่ไม่ประคอง

— Henry C

108

คุณสามารถใช้:beforeและcontent:จำไว้ว่าสิ่งนี้ไม่รองรับใน IE 7 หรือต่ำกว่า หากคุณตกลงกับมันนี่เป็นทางออกที่ดีที่สุดของคุณ ดูตารางความเข้ากันได้ของCan I UseหรือQuirksMode CSS สำหรับรายละเอียดทั้งหมด

โซลูชันที่น่าสนใจกว่าเล็กน้อยที่ควรใช้กับเบราว์เซอร์รุ่นเก่าคือการใช้ภาพสำหรับสัญลักษณ์แสดงหัวข้อย่อยและทำให้ภาพดูเป็นเส้นประ ดูหน้า W3Clist-style-imageสำหรับตัวอย่าง

— Darko Z
แหล่งที่มา

27

ปัญหา:beforeคือเมื่อรายการมีช่วงหลายบรรทัดเยื้องในบรรทัดที่ 2 จะเริ่มต้นที่เส้นประซึ่งจะทำให้เอฟเฟกต์รายการเยื้อง คุณต้องใช้การเยื้องแบบแขวนเพื่อหลีกเลี่ยงปัญหานี้ เห็นนี้: alistapart.com/articles/taminglists

— chiborg

3

หากต้องการวาง mdash ในการcontentใช้งานcontent: "\2014\a0"

— Ivan Z

ดูคำตอบของ @three ซึ่งเป็นคำที่กว้างกว่าและ verbose น้อยกว่า!

— Ben Vertonghen

221

มีการแก้ไขที่ง่าย (การเยื้องข้อความ) เพื่อเก็บเอฟเฟกต์รายการที่เยื้องไว้ด้วย :beforeคลาสหลอก

ul {
  margin: 0;
}
ul.dashed {
  list-style-type: none;
}
ul.dashed > li {
  text-indent: -5px;
}
ul.dashed > li:before {
  content: "-";
  text-indent: -5px;
}

Some text
<ul class="dashed">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>
Last text

ขยายตัวอย่างข้อมูล

— aron.lakatos
แหล่งที่มา

14

ทำงาน แต่ไม่ลืมที่จะใส่list-style-type: none;กับ<ul>องค์ประกอบ

— toesslab

5

โดยไม่มีการเยื้องเพียงul li:before{ content:"- ";}

— Qlimax

4

ฉันชอบที่จะเพิ่มdisplay: block; float: left;สิ่งli:beforeที่ดึงมันออกจากการไหลของเนื้อหาได้ง่ายขึ้นมิฉะนั้นมันก็ค่อนข้างยาก / บั๊กกี้ในการรับบรรทัดแรกและบรรทัดถัดไปเพื่อจัดเรียงอย่างถูกต้อง หรือคำตอบของ Keyan Zhang ก็ทำเช่นนี้ด้วยการกำหนดตำแหน่งที่แน่นอน

— Simon East

8

ค่อนข้างโง่ที่list-style-type dashไม่ได้เป็นส่วนหนึ่งของ CSS อยู่แล้ว

— Pixelomo

สิ่งใดจะเป็นโซลูชันแบบ HTML เท่านั้นที่คล้ายกับโซลูชันที่คุณเสนอ

— พลูโต

74

นี่คือเวอร์ชันที่ไม่มีตำแหน่งใด ๆ หรือสัมบูรณ์และไม่มีการเยื้องข้อความ:

ul.dash {
    list-style: none;
    margin-left: 0;
    padding-left: 1em;
}
ul.dash > li:before {
    display: inline-block;
    content: "-";
    width: 1em;
    margin-left: -1em;
}

สนุก ;)

— velop
แหล่งที่มา

1

ที่ดี! ฉันขอแนะนำ 'ul.dash> li: before' uls ภายในอื่นได้รับสับสน

— w.stoettinger

1

ฉันชอบที่จะเพิ่มdisplay: block; float: left;สิ่งli:beforeที่ดึงมันออกจากการไหลของเนื้อหาได้ง่ายขึ้นมิฉะนั้นมันก็ค่อนข้างยาก / บั๊กกี้ในการรับบรรทัดแรกและบรรทัดถัดไปเพื่อจัดเรียงอย่างถูกต้อง หรือคำตอบของ Keyan Zhang ก็ทำเช่นนี้ด้วยการกำหนดตำแหน่งที่แน่นอน

— Simon East

ฉันใช้สิ่งนี้เป็น.activeคลาสนำทางด้วยli:before { visibility: hidden; }และli.active:before { visibility: visible; }

— sshow

ข้อเสนอแนะที่ดีที่สุด!

— Ben Vertonghen

64

ใช้สิ่งนี้:

ul
{
    list-style: square inside url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==');
}

— Jase
แหล่งที่มา

3

น่าเสียดายที่มันไม่เคารพสีของข้อความ css

— Hereblur

7

ทางออกเดียวที่เป็นไปได้สำหรับอีเมล

— Oleg

ไม่สามารถใช้งานได้ทั้ง Gmail (พ.ย. 2018) และ Outlook 2016 ในขณะนี้

— 2875289

33

ul {
  list-style-type: none;
}

ul > li:before {
  content: "–"; /* en dash */
  position: absolute;
  margin-left: -1.1em; 
}

ซอสาธิต

— จางจาง
แหล่งที่มา

25

ให้ฉันเพิ่มเวอร์ชันของฉันด้วยส่วนใหญ่ฉันจะหาโซลูชันที่ฉันต้องการอีกครั้ง:

ul {
  list-style-type: none;
  /*use padding to move list item from left to right*/
  padding-left: 1em;
}

ul li:before {
  content: "–";
  position: absolute;
  /*change margin to move dash around*/
  margin-left: -1em;
}

<!-- 
Just use the following CSS to turn your
common disc lists into a list-style-type: 'dash' 
Give credit and enjoy!
-->
Some text
<ul>
  <li>One</li>
  <li>Very</li>
  <li>Simple Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
  <li>Approach!</li>
</ul>

ขยายตัวอย่างข้อมูล

https://codepen.io/burningTyger/pen/dNzgrQ

— สาม
แหล่งที่มา

IMHO มันเป็นทางออกที่ดีที่สุดจนถึง ขอบคุณสำหรับการแบ่งปัน!

— Axel

15

ในกรณีของฉันเพิ่มรหัสนี้ใน CSS

ul {
    list-style-type: '- ';
}

ก็เพียงพอแล้ว เรียบง่ายเหมือนที่เป็นอยู่

— Albert Sosnowski
แหล่งที่มา

1

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

— ahstro

4

นี้ดูเหมือนว่าจะได้รับการสนับสนุนในสก์ท็อปของ Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave

ตอนนี้ได้รับการสนับสนุนใน Chrome ด้วย (จาก 79 ฉันเชื่อว่า): chromestatus.com/feature/5893875400966144และcaniuse.com/#feat=mdn-css_properties_list-style-type_string

— Alex

9

หนึ่งในคำตอบยอดนิยมไม่ได้ผลสำหรับฉันเพราะหลังจากการทดลองและข้อผิดพลาดเล็กน้อย li: ก่อนหน้านี้ยังต้องการแสดงกฎ css: inline-block

ดังนั้นนี่คือคำตอบที่ทำงานได้อย่างสมบูรณ์สำหรับฉัน:

ul.dashes{
  list-style: none;
  padding-left: 2em;
  li{
    &:before{
      content: "-";
      text-indent: -2em;
      display: inline-block;
    }
  }
}

— Joery
แหล่งที่มา

สิ่งนี้เขียนด้วย LESS / SASS

— Arslan Ameer

7

ul {
margin:0;
list-style-type: none;
}
li:before { content: "- ";}

— user3849374
แหล่งที่มา

อาจ `` `ul {margin: 0; list-style-type: none; } ul li: before {content: "-";} `` `มิฉะนั้นจะส่งผลกระทบต่อรายชื่อ ol เช่นกัน

— Sasha Bond

5

นี่คือรุ่นซอของฉัน:

คลาส (modernizr) .generatedcontentใน<html>ทางปฏิบัติหมายถึง IE8 + และเบราว์เซอร์อื่น ๆ ที่มีสติ

<html class="generatedcontent">
  <ul class="ul-dash hanging">
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
    <li>Lorem ipsum dolor sit amet stack o verflow dot com</li>
  </ul>

CSS:

.ul-dash {
  margin: 0;
}

.ul-dash {
  margin-left: 0em;
  padding-left: 1.5em;
}

.ul-dash.hanging > li { /* remove '>' for IE6 support */
  padding-left: 1em;
  text-indent: -1em;
}  

.generatedcontent .ul-dash {
  list-style: none;
}
.generatedcontent .ul-dash > li:before {
  content: "–";
  text-indent: 0;
  display: inline-block;
  width: 0;
  position: relative;
  left: -1.5em;
}

— biziclop
แหล่งที่มา

3

ฉันไม่ทราบว่ามีวิธีที่ดีกว่าหรือไม่ แต่คุณสามารถสร้างกราฟิกสัญลักษณ์แสดงหัวข้อย่อยแบบกำหนดเองที่แสดงเส้นประแล้วให้เบราว์เซอร์รู้ว่าคุณต้องการใช้ในรายการของคุณด้วยlist-style-typeทรัพย์สิน ตัวอย่างในหน้านั้นแสดงวิธีใช้กราฟิกเป็นสัญลักษณ์แสดงหัวข้อย่อย

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

แก้ไข: ฉันได้ทำการทดสอบเล็กน้อยด้วยวิธีการของ OP ใน IE8 ฉันไม่สามารถใช้เทคนิคได้ดังนั้นจึงยังไม่ได้ข้ามเบราว์เซอร์ ยิ่งกว่านั้นใน Firefox และ Chrome การตั้งค่า list-style-type เป็น none จะถูกละเว้น

— TNI
แหล่งที่มา

3

โซลูชันของฉันอยู่ในการเพิ่มการขยายแท็กพิเศษด้วย mdash:

<ul class="mdash-list">
    <li><span class="mdash-icon">&mdash;</span>ABC</li>
    <li><span class="mdash-icon">&mdash;</span>XYZ</li>
</ul>

และเพิ่มลงใน css:

ul.mdash-list 
{
    list-style:none;
}

ul.mdash-list  li
{
    position:relative;
}

ul.mdash-list li .mdash-icon
{
    position:absolute;
    left:-20px;
}

— วิกเตอร์ Stagurov
แหล่งที่มา

3

อีกทางหนึ่ง:

li:before {
  content: '\2014\00a0\00a0'; /* em-dash followed by two non-breaking spaces*/
}
li {
  list-style: none;
  text-indent: -1.5em;
  padding-left: 1.5em;    
}

— IMOS
แหล่งที่มา

3

CSS:

li:before {
  content: '— ';
  margin-left: -20px;
}

li {
  margin-left: 20px;
  list-style: none;
}

HTML:

<ul>
  <li>foo</li>
  <li>bar</li>
</ul>

— blackchestnut
แหล่งที่มา

1

นี้ไม่ได้ทำงานสำหรับรายการที่ครอบคลุมมากกว่าหนึ่งบรรทัด

— jenlampton

2

แทนที่จะใช้ lu li, ใช้dl (definition list) and ddแล้ว <dd>สามารถกำหนดโดยใช้รูปแบบ CSS มาตรฐานเช่น{color:blue;font-size:1em;}และใช้เป็นเครื่องหมายสิ่งที่สัญลักษณ์ที่คุณวางหลังจากแท็ก html มันทำงานเหมือน li UL แต่ช่วยให้คุณใช้สัญลักษณ์ใด ๆ ul liที่คุณเพียงแค่ต้องเยื้องมันเพื่อให้ได้ผลรายการเยื้องปกติคุณจะได้รับด้วย

CSS:
dd{text-indent:-10px;}

HTML
<dl>
<dd>- One</dd>
<dd>- Two</dd>
<dd>- Three</dd></dl>

ให้โค้ดที่คุณสะอาดกว่ามาก! ด้วยวิธีนี้คุณสามารถใช้อักขระทุกชนิดเป็นเครื่องหมาย! เยื้องเป็นเรื่องเกี่ยวกับ-10pxและใช้งานได้สมบูรณ์แบบ!

— Carolyne Comtois
แหล่งที่มา

7

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

— mzgajner

1

สำหรับใครที่มีปัญหาในวันนี้วิธีแก้ปัญหาก็คือ:

รายการสไตล์: "-"

— ค้างคาวผึ้ง
แหล่งที่มา

-1

สิ่งที่ได้ผลสำหรับฉันคือ

<ul>
    <li type= "none">  &ndash; line 1 </li>
    <li type= "none">  &ndash; line 2 </li>
    <li type= "none">  &ndash; line 3 </li>
</ul>

— C oneil
แหล่งที่มา