Dấu gạch ngang kiểu danh sách HTML

222

Có cách nào để tạo kiểu danh sách trong HTML bằng dấu gạch ngang (nghĩa là - hoặc - –hoặc - —) tức là

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

Xuất ra:

- abc

Tôi đã làm điều này với một cái gì đó giống như li:before { content: "-" };, mặc dù tôi không biết nhược điểm của tùy chọn đó (và sẽ có nhiều nghĩa vụ phải phản hồi).

Tổng quát hơn, tôi sẽ không biết cách sử dụng các ký tự chung cho các mục danh sách.

— Brian M. Hunt
nguồn

79

vì dấu gạch ngang thường được sử dụng trong danh sách tại sao nó không được bao gồm trong css?

— temirbek

101

quan trọng hơn, tại sao lại có đánh số và katakana ... nhưng không phải là dấu gạch ngang?

— Henry C

108

Bạn có thể sử dụng :beforevà content:nhớ rằng điều này không được hỗ trợ trong IE 7 trở xuống. Nếu bạn ổn với điều đó thì đây là giải pháp tốt nhất của bạn. Xem bảng tương thích CSS Tôi có thể sử dụng hoặc QuirksMode để biết chi tiết đầy đủ.

Một giải pháp nhanh hơn một chút nên hoạt động trong các trình duyệt cũ hơn là sử dụng hình ảnh cho dấu đầu dòng và chỉ làm cho hình ảnh trông giống như một dấu gạch ngang. Xem trang W3Clist-style-image để biết ví dụ.

— Darko Z
nguồn

27

Vấn đề với :beforelà khi các mục danh sách kéo dài một vài dòng, thụt lề trên dòng thứ 2 bắt đầu nơi dấu gạch ngang, do đó làm hỏng hiệu ứng danh sách thụt lề. Bạn cần sử dụng thụt lề để tránh điều này. Xem điều này: alistapart.com/articles/taminglists

— chiborg

3

Để đặt mdash đang contentsử dụngcontent: "\2014\a0"

— Ivan Z

Xem câu trả lời của @three, chung chung hơn và ít dài dòng hơn!

— Ben Vertonghen

221

Có một sửa chữa dễ dàng (văn bản thụt lề) để giữ hiệu ứng danh sách thụt lề với :beforelớp giả.

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

Mở rộng đoạn trích

— aron.lakatos
nguồn

14

Hoạt động, nhưng đừng quên để đưa list-style-type: none;vào <ul>phần tử.

— toesslab 9/2/2015

5

không cần thụt chỉul li:before{ content:"- ";}

— Qlimax

4

Tôi thích thêm display: block; float: left;vào li:beforecái có thể dễ dàng kéo nó ra khỏi luồng nội dung hơn, nếu không, nó khá khó / lỗi để có được các dòng đầu tiên và tiếp theo xếp hàng chính xác. Hoặc câu trả lời của Keyan Zhang cũng làm điều này với định vị tuyệt đối.

— Simon East

8

khá ngu ngốc list-style-type dashchưa phải là một phần của CSS

— Pixelomo

Điều gì sẽ là một giải pháp chỉ HTML tương tự như giải pháp bạn đề xuất?

— pluton

74

Đây là phiên bản không có vị trí tương đối hoặc tuyệt đối và không có văn bản thụt lề:

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

Thưởng thức ;)

— vận tốc
nguồn

1

tuyệt quá! tôi muốn đề xuất 'ul.dash> li: trước'. nếu không thì nội tâm bị rối tung lên.

— w.stoettinger

1

Tôi thích thêm display: block; float: left;vào li:beforecái có thể dễ dàng kéo nó ra khỏi luồng nội dung hơn, nếu không, nó khá khó / lỗi để có được các dòng đầu tiên và tiếp theo xếp hàng chính xác. Hoặc câu trả lời của Keyan Zhang cũng làm điều này với định vị tuyệt đối.

— Simon East

Tôi sử dụng nó như một .activelớp điều hướng với li:before { visibility: hidden; }vàli.active:before { visibility: visible; }

— sshow

Imo gợi ý tốt nhất!

— Ben Vertonghen

64

Dùng cái này:

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

— Jase
nguồn

3

Thật không may, nó không tôn trọng màu sắc của văn bản css.

— Hereblur

7

Giải pháp khả thi duy nhất cho email

— Oleg

Nó không hoạt động cho cả Gmail (tháng 11 năm 2018) và Outlook 2016 ngay bây giờ.

— dùng2875289

33

ul {
  list-style-type: none;
}

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

bản demo fiddle

— Keyan Zhang
nguồn

25

Hãy để tôi thêm phiên bản của mình, chủ yếu là để tôi tìm lại giải pháp ưa thích của riêng mình:

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>

Mở rộng đoạn trích

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

— số ba
nguồn

IMHO là giải pháp tốt nhất cho đến nay. Thx đã chia sẻ!

— Axel

14

Trong trường hợp của tôi, thêm mã này vào CSS

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

đã đủ. Đơn giản như nó là.

— Albert Sosnowski
nguồn

1

Giả sử đây là một bổ sung tương đối mới cho CSS vì tôi không thể tìm thấy câu trả lời khác đề cập đến nó, nhưng đây thực sự là câu trả lời được chấp nhận trong những ngày này.

— ahstro

4

Điều này dường như chỉ được hỗ trợ trong máy tính để bàn Firefox: developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

— dave

Điều này hiện cũng được hỗ trợ trong Chrome (kể từ 79 tôi tin): chromestatus.com/feature/5893875400966144 và caniuse.com/#feat=mdn-css_properIES_list-style-type_opes

— Alex

9

Một trong những câu trả lời hàng đầu không phù hợp với tôi, bởi vì, sau một chút thử nghiệm và sai sót, li: trước đó cũng cần hiển thị quy tắc css: inline-block.

Vì vậy, đây là một câu trả lời đầy đủ cho tôi:

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

— Trò đùa
nguồn

điều này được viết bằng BÀI / SASS.

— Arslan Ameer

7

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

— người dùng 3849374
nguồn

có lẽ `` `ul {lề: 0; list-style-type: none; } ul li: before {content: "-";} `` `nếu không nó cũng ảnh hưởng đến danh sách ol

— Sasha Bond

5

Đây là phiên bản fiddle của tôi :

Lớp (Modernizr) .generatedcontenttrên <html>thực tế có nghĩa là IE8 + và mọi trình duyệt lành mạnh khác.

<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
nguồn

3

Tôi không biết có cách nào tốt hơn không, nhưng bạn có thể tạo đồ họa dấu đầu dòng tùy chỉnh mô tả dấu gạch ngang và sau đó cho trình duyệt biết bạn muốn sử dụng nó trong danh sách của mình với kiểu kiểu danh sách . Một ví dụ trên trang đó cho thấy cách sử dụng đồ họa như một viên đạn.

Tôi chưa bao giờ thử sử dụng: trước đây theo cách bạn có, mặc dù nó có thể hoạt động. Nhược điểm là nó sẽ không được hỗ trợ bởi một số trình duyệt cũ. Phản ứng ruột của tôi là điều này vẫn đủ quan trọng để xem xét. Trong tương lai, điều này có thể không quan trọng.

EDIT: Tôi đã thực hiện một thử nghiệm nhỏ với phương pháp của OP. Trong IE8, tôi không thể làm cho kỹ thuật hoạt động được, vì vậy nó chắc chắn chưa phải là trình duyệt chéo. Hơn nữa, trong Firefox và Chrome, việc đặt loại kiểu danh sách thành không có kết hợp dường như bị bỏ qua.

— TNi
nguồn

3

Giải pháp của tôi là thêm thẻ span với mdash trong đó:

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

và thêm vào css:

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

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

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

— Victor Stagurov
nguồn

3

Cách khác:

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
nguồn

3

CSS:

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

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

HTML:

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

— hạt dẻ
nguồn

1

điều này không hoạt động đối với các mục kéo dài hơn một dòng

— jenlampton 16/03/18

2

Thay vì sử dụng lu li, sử dụng dl (definition list) and dd. <dd>có thể được xác định bằng cách sử dụng kiểu css tiêu chuẩn như {color:blue;font-size:1em;}và sử dụng làm điểm đánh dấu bất kỳ ký hiệu nào bạn đặt sau thẻ html. Nó hoạt động như ul li, nhưng cho phép bạn sử dụng bất kỳ ký hiệu nào, bạn chỉ cần thụt lề để có được hiệu ứng danh sách thụt lề mà bạn thường có ul li.

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

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

Cung cấp cho bạn mã sạch hơn nhiều! Bằng cách đó, bạn có thể sử dụng bất kỳ loại nhân vật nào làm điểm đánh dấu! Indent là về -10pxvà nó hoạt động hoàn hảo!

— Carolyne Comtois
nguồn

7

Điều này khá tệ vì hai lý do. Đầu tiên, bạn đang đặt các ký tự dấu đầu dòng của mình trực tiếp vào văn bản, trộn nội dung và kiểu. Thứ hai, bạn đang sử dụng sai phần tử dl, đây là một bài viết về cách sử dụng đúng .

— mzgajner

1

Đối với bất cứ ai có vấn đề này ngày hôm nay, giải pháp đơn giản là:

kiểu danh sách: "-"

— Ong Bát
nguồn

-1

Những gì làm việc cho tôi là

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

— C một
nguồn