Làm thế nào để loại bỏ vết lõm khỏi một mục danh sách không có thứ tự?

Tôi muốn loại bỏ tất cả các vết lõm từ ul. Tôi cố gắng thiết lập margin, padding, text-indentđể 0, nhưng vô ích. Có vẻ như cài đặt text-indentthành số âm sẽ thực hiện mẹo - nhưng đó có thực sự là cách duy nhất để loại bỏ vết lõm?

Đặt kiểu danh sách và phần đệm bên trái thành không có gì.

ul {
    list-style: none;
    padding-left: 0;
}​

ul {
  list-style: none;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Để duy trì đạn, bạn có thể thay thế list-style: nonebằng list-style-position: insidehoặc tốc ký list-style: inside:

ul {
  list-style-position: inside;
  padding-left: 0;
}

ul {
  list-style-position: inside;
  padding-left: 0;
}

<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

Giải pháp ưa thích của tôi để xóa <ul> thụt lề là một lớp lót CSS đơn giản:

ul { padding-left: 1.2em; }

<p>A leading line of paragraph text</p>
<ul>
    <li>Bullet points align with paragraph text above.</li>
    <li>Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. Long list items wrap around correctly. </li>
    <li>List item 3</li>
</ul>
<p>A trailing line of paragraph text</p>

Giải pháp này không chỉ nhẹ, mà còn có nhiều ưu điểm:

• Nó độc đáo sắp xếp trái dấu <ul> của dấu gạch đầu dòng vào văn bản đoạn bình thường xung quanh (= thụt lề <ul> bị loại bỏ).
• Các khối văn bản trong các phần tử <li> vẫn được thụt lề chính xác nếu chúng bao quanh thành nhiều dòng.

Thông tin kế thừa:
Đối với phiên bản IE 8 trở xuống, bạn phải sử dụng lề trái thay thế:

    ul { margin-left: 1.2em; }

Thêm phần này vào CSS của bạn:

ul { list-style-position: inside; }

Điều này sẽ đặt các phần tử li trong cùng một thụt lề như các đoạn văn bản và văn bản khác.

Tham chiếu: http://www.w3schools.com/cssref/pr_list-style-poseition.asp

display:table-row; cũng sẽ thoát khỏi vết lõm nhưng sẽ loại bỏ đạn.

Gỡ bỏ phần đệm:

padding-left: 0;

Bạn có thể cung cấp một liên kết ? cảm ơn tôi có thể xem qua Nhiều khả năng bộ chọn css của bạn không đủ mạnh hoặc bạn có thể thử

padding:0!important;

Tôi có cùng một vấn đề với chân trang tôi đang cố gắng phân chia. Tôi thấy rằng điều này làm việc cho tôi bằng cách thử một vài gợi ý ở trên:

footer div ul {
    list-style-position: inside;
    padding-left: 0;
}

Điều này dường như giữ nó ở bên trái dưới h1 của tôi và viên đạn chỉ bên trong div chứ không phải bên ngoài bên trái.

Bản demo trực tiếp: https://jsfiddle.net/h8uxmoj4/

ol, ul {
  padding-left: 0;
}

li {
  list-style: none;
  padding-left: 1.25rem;
  position: relative;
}

li::before {
  left: 0;
  position: absolute;
}

ol {
  counter-reset: counter;
}

ol li::before {
  content: counter(counter) ".";
  counter-increment: counter;
}

ul li::before {
  content: "●";
}

Vì câu hỏi ban đầu không rõ ràng về các yêu cầu của nó, tôi đã cố gắng giải quyết vấn đề này trong các hướng dẫn được đặt ra bởi các câu trả lời khác. Đặc biệt:

• Căn chỉnh danh sách đạn với văn bản đoạn bên ngoài
• Căn chỉnh nhiều dòng trong cùng một mục danh sách

Tôi cũng muốn một giải pháp không dựa vào các trình duyệt đồng ý về việc sử dụng bao nhiêu phần đệm. Tôi đã thêm một danh sách theo thứ tự cho đầy đủ.

Thực hiện nội tuyến này, tôi đặt lề là 0 (ul style = "lề: -0px"). Các viên đạn thẳng hàng với đoạn không có phần nhô ra.