Tôi cần một danh sách không có thứ tự mà không có bất kỳ viên đạn nào

Tôi đã tạo ra 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ó một danh sách mà không có đạn?

Bạn có thể loại bỏ những viên đạn bằng cách thiết lập list-style-typeđể nonetrên CSS cho các phần tử cha mẹ (thường là một <ul>), ví dụ:

ul {
  list-style-type: none;
}

Bạn cũng có thể muốn thêm padding: 0và thêm margin: 0vào đó nếu bạn muốn loại bỏ vết lõm.

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

Nếu bạn đang sử dụng Bootstrap, nó có một lớp "chưa được xử lý":

Xóa kiểu danh sách mặc định và phần đệm bên 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>

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

Bootstrap 4: https://getbootstrap.com/docs/4.3/content/typography/#unstyled

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

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

Sàng lọc nhỏ cho các câu trả lời trước: Để làm cho các dòng dài dễ đọc hơn nếu chúng tràn sang các dòng màn hình bổ sung:

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

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

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

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

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

Tôi đã sử dụng kiểu list trên cả ul và li để loại bỏ đạn. Tôi muốn thay thế các viên đạn bằng một ký tự tùy chỉnh, trong trường hợp này là một 'dấu gạch ngang'. Điều đó mang lại hiệu ứng thụt lề độc đáo hoạt động khi văn bản kết thúc tốt đẹp.

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;
}

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

Để loại bỏ hoàn toàn ulkiểu mặc định:

    list-style-type: none;

    margin: 0;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline-start: 0;
    margin-inline-end: 0;
    padding-inline-start: 0;

Nếu bạn muốn thực hiện điều này chỉ với HTML thuần túy , giải pháp này sẽ hoạt động trên tất cả các trình duyệt chính:

Danh sách mô tả

Chỉ cần sử dụng HTML sau:

<dl>
  <dt>List Item 1</dt>
    <dd>Sub-Item 1.1</dd>
  <dt>List Item 2</dt>
    <dd>Sub-Item 2.1</dd>
    <dd>Sub-Item 2.2</dd>
    <dd>Sub-Item 2.3</dd>
  <dt>List Item 3</dt>
    <dd>Sub-Item 3.1</dd>
</dl>

Mà sẽ tạo ra một danh sách tương tự như sau:

List Item 1
     Sub-Item 1.1
List Item 2
     Sub-Item 2.1
     Sub-Item 2.2
     Sub-Item 2.3
List Item 3
     Sub-Item 3.1

Ví dụ ở đây: https://jsfiddle.net/zumcmvma/2/

Tham khảo tại đây: https://www.w3schools.com/tags/tag_dl.asp

Điều này ra lệnh một danh sách theo chiều dọc mà không có điểm đạn. Chỉ trong một dòng!

li {
    display: block;
}

nếu bạn đang phát triển một chủ đề hiện có, có thể chủ đề đó có kiểu danh sách tùy chỉnh.

Vì vậy, nếu bạn không thể thay đổi kiểu danh sách bằng cách sử dụng list-style: none;thẻ ul hoặc li, trước tiên hãy kiểm tra !importantvì có thể một số dòng kiểu khác đang ghi đè lên kiểu của bạn.

Nếu không phải như vậy thì hãy kiểm tra xem li:beforecó thể nó có nội dung không. sau đó làm:

li:before { dispaly: none; }

 <div class="custom-control custom-checkbox left">
    <ul class="list-unstyled">
        <li>
         <label class="btn btn-secondary text-left" style="width:100%;text-align:left;padding:2px;">
           <input type="checkbox" style="zoom:1.7;vertical-align:bottom;" asp-for="@Model[i].IsChecked" class="custom-control-input" /> @Model[i].Title
         </label>
        </li>
     </ul>
</div>

Tôi đã thử và quan sát:

header ul {
   margin: 0;
   padding: 0;
}

Trong trường hợp bạn muốn giữ mọi thứ đơn giản mà không cần dùng đến CSS, tôi chỉ cần đặt một  dòng mã của mình. Ví dụ <table></table>.

Vâng, nó để lại một vài khoảng trống, nhưng đó không phải là một điều xấu.