Câu hỏi Cần danh sách không có thứ tự mà không có bất kỳ dấu đầu dòng nào


Tôi đã tạo một danh sách không có thứ tự. Tôi cảm thấy những viên đạn trong danh sách không có thứ tự là khó chịu, vì vậy tôi muốn loại bỏ chúng.

Có thể có danh sách không có đạn không?


2045
2018-06-22 13:57


gốc




Các câu trả lời:


Bạn có thể loại bỏ dấu đầu dòng bằng cách đặt list-style-type đến none trên CSS cho phần tử cha (thường là <ul>), ví dụ:

ul {
  list-style-type: none;
}

Bạn cũng có thể muốn thêm padding: 0 và margin: 0 cho rằng, nếu bạn muốn loại bỏ thụt đầu dòng là tốt.

Xem Danh sách để có hướng dẫn tuyệt vời về các kỹ thuật định dạng danh sách.


3046
2018-06-22 14:00



không hoạt động trên IE9, bạn cần phải chọn kiểu danh sách quảng cáo: none; để li - tovmeod
@robaker nó chỉ mất 15 yrs để làm cho nó đúng và khi hầu hết mọi người thậm chí không sử dụng IE10 được nêu ra. thở dài ... Bằng cách nào đó tôi ghét M $. lol - Panama Jack
Chúng tôi không thiết kế cho IE9 trong năm 2015, để ghi lại - Dom Vinyard
Nếu chúng ta xem xét IE thì không có trang web nào có thể được hoàn thành trong thế kỷ này. - Ankit
@DomVinyard Chúng tôi vẫn đang thiết kế cho IE8 vào năm 2016, để ghi lại ... - Amy Barrett


Nếu bạn đang sử dụng Bootstrap, nó có một lớp "unstyled":

Loại bỏ kiểu danh sách mặc định và đệm trái trên các mục danh sách (chỉ dành cho trẻ em ngay lập tức).

Bootstrap 2:

<ul class="unstyled">
   <li>...</li>
</ul>

http://twitter.github.io/bootstrap/base-css.html#typography

Bootstrap 3 và 4:

<ul class="list-unstyled">
   <li>...</li>
</ul>

http://getbootstrap.com/css/#type-lists


469
2017-07-11 15:05



Trong Boostrap 3, điều này đã thay đổi một chút thành: class = "list-unstyled" - guido
Chỉ cần tự hỏi các bạn đọc cái này ở đâu? Tôi đã tìm kiếm nó nhưng chưa tìm thấy nó. - Skytiger
@Skytiger getbootstrap.com/css/#type-lists - Danation
Lớp Bootstrap 3 cũng hoạt động với Bootstrap 4 - Christophe Roussy
Trên thực tế, câu trả lời này là chính xác những gì tôi đang tìm kiếm. Và Bootstrap được sử dụng bởi 3.6% của toàn bộ Internet, do đó, nó không rơi. trends.builtwith.com/docinfo/Twitter-Bootstrap  Tìm kiếm nhanh trên Google cho thấy rằng Bootstrap được đặt trong danh mục "khung CSS phổ biến nhất". - Bobort


Bạn cần sử dụng list-style: none;

<ul style="list-style: none;">
    <li> ...</li>
</ul>

183
2018-06-22 14:00



Giải pháp tuyệt vời. Tôi đang tìm một giải pháp không liên quan đến việc bạn chỉnh sửa tệp CSS. Cảm ơn rất nhiều! - Kevin Groen
@ Kevin: Đó là nội tuyến CSS ... thực hành tốt nhất được xem xét, bạn thực sự nên đặt điều này trong một tập tin CSS. - aboveyou00
Giải pháp tuyệt vời đặc biệt là nếu CSS giữ đè định dạng mong muốn. - Mohammed
Câu trả lời này hoạt động mà không cần Bootstrap. Ngoài ra, nó không cần phải xây dựng thêm tệp * .css. Trên thực tế, đây là một ví dụ điển hình về cách nhúng mã css vào một tệp html duy nhất. - anonymous
'thực hành tốt nhất' thường nằm trong mắt của người ứng xử - và / hoặc cho ứng dụng cụ thể. Ví dụ này đã giúp tôi là nơi mà phần lớn các danh sách đều tốt với viên đạn, tuy nhiên, tôi muốn tạo biểu tượng của riêng mình trên một danh sách cụ thể. Thay đổi các .css sẽ ảnh hưởng đến tất cả các danh sách, trong khi nội tuyến chỉ quan tâm đến một danh sách. Vì vậy, đôi khi 'tốt nhất' là những gì bạn cần vào thời điểm bạn cần nó. - CFP Support


trong css, phong cách,

 list-style-type: none;

49
2018-06-22 14:00





Bạn sẽ phải thêm kiểu vào <ul> phần tử như sau:

<ul style="list-style: none; ">
    <li>Item</li>
    ...
    <li>Item</li>
</ul>

Điều đó sẽ loại bỏ các viên đạn. Bạn cũng có thể thêm CSS trong biểu định kiểu như các ví dụ ở trên.


43
2018-06-22 14:02



bây giờ trong> 3.0 nó .list-unstyled - Adam Pflantzer
trong> 3.0 bạn có thể cần phải thêm nó vào li - codechurn
@AdamPflantzer 3.0 có nghĩa là gì. Không có kết nối với câu hỏi và cũng không trả lời - Ghostwriter78
Anh ta đang nói đến Bootstrap, không liên quan gì đến câu trả lời này. - Bobort


trong css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00





Tinh chỉnh nhỏ ở trên: Để làm cho các dòng dài hơn dễ đọc hơn nếu chúng tràn qua các dòng màn hình bổ sung:

ul, li {list-style-type: none;}

li {padding-left: 2em; text-indent: -2em;}

34
2017-12-10 05:55



Hoạt động, nhưng chỉ dành cho IE8 - Underverse


Sử dụng CSS sau:

ul {
  list-style-type: none
}

34
2018-06-22 14:00





Tự nhiên:

ul { list-style-type: none; }

Bootstrap:

<ul class="list-unstyled list-group">
    <li class="list-group-item">...</li>
</ul>

Chú thích: Nếu bạn đang sử dụng các nhóm danh sách, thì không cần phải liệt kê danh sách.


17
2018-05-14 21:23





Tôi đã sử dụng kiểu danh sách trên cả ul và li để loại bỏ các viên đạn. Tôi muốn thay thế các viên đạn bằng một nhân vật tùy chỉnh, trong trường hợp này là một 'dấu gạch ngang', mang lại hiệu ứng tốt đẹp. Vì vậy, bằng cách sử dụng đánh dấu này:

<ul class="dashed-list">
  <li>text</li>
  <li>text</li>
</ul>

với css này:

ul.dashed-list
{
    list-style: none outside none;
}

ul.dashed-list li:before {
    content: "\2014";
    float: left;
    margin: 0 0 0 -27px;
    padding: 0;
}

ul.dashed-list li {
    list-style-type: none;
}

cung cấp hiệu ứng thụt lề độc đáo hoạt động khi văn bản kết thúc tốt đẹp


13
2017-09-17 04:52





Nếu bạn không thể làm cho nó hoạt động ở <ul> mức độ, bạn có thể cần phải đặt list-style-type: none; tại <li> cấp độ:

<ul>
    <li style="list-style-type: none;">Item 1</li>
    <li style="list-style-type: none;">Item 2</li>
</ul>

Bạn có thể tạo một lớp CSS để tránh sự lặp lại này:

<style>
ul.no-bullets li 
{
    list-style-type: none;
}
</style>

<ul class="no-bullets">
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

EDIT: Khi cần thiết, sử dụng !important:

<style>
ul.no-bullets li 
{
    list-style-type: none !important;
}
</style>

13
2017-10-08 08:14