Sıralanmamış bir liste öğesinden girinti nasıl kaldırılır?

Tüm girintileri kaldırmak istiyorum ul. Ben ayarlama çalıştı margin, padding, text-indentiçin 0, ama boşuna. text-indentNegatif bir sayıya ayar yapmak hile yapıyor gibi görünüyor - ama gerçekten girintiyi kaldırmanın tek yolu bu mu?

Liste stilini ve sol dolguyu hiçbir şeye ayarlayın.

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>

Mermileri korumak için list-style: noneile list-style-position: insideveya stenoyu değiştirebilirsiniz 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>

<ul> girintisini kaldırmak için tercih ettiğim çözüm, basit bir CSS tek astarlı:

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>

Bu çözüm sadece hafif değil, aynı zamanda birçok avantaja sahiptir:

• <ul> öğesinin mermi noktalarını çevreleyen normal paragraf metnine (= <ul> girintisi kaldırıldı) hizalar.
• <li> öğelerindeki metin blokları, birden fazla satıra sarılırsa doğru girintili olarak kalır.

Eski bilgiler:
IE 8 ve önceki sürümler için bunun yerine kenar boşluğu kullanmalısınız:

    ul { margin-left: 1.2em; }

Bunu CSS'nize ekleyin:

ul { list-style-position: inside; }

Bu, li öğelerini diğer paragraflar ve metinlerle aynı girintiye yerleştirir.

Ref: http://www.w3schools.com/cssref/pr_list-style-position.asp

display:table-row; girintiden de kurtulacak, ancak mermileri kaldıracak.

Dolguyu çıkarın:

padding-left: 0;

Bir bağlantı verebilir misiniz? teşekkürler Ben bir göz atabilirsiniz Büyük olasılıkla css seçici yeterince güçlü değil ya da deneyebilirsiniz

padding:0!important;

Aynı sorunu altbilgiye bölmeye çalışıyorum. Yukarıdaki önerilerin birkaçını birleştirerek bunun benim için çalıştığını buldum:

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

Bu onu h1'imin altında sola tutuyor gibi görünüyor ve mermi, solun dışında değil, div içindeki noktaları gösteriyor.

Canlı demo: 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: "●";
}

Orijinal soru gereksinimleri hakkında belirsiz olduğundan, bu sorunu diğer cevapların belirlediği kılavuzlarda çözmeye çalıştım. Özellikle:

• Liste madde işaretlerini dış paragraf metniyle hizalama
• Aynı liste öğesindeki birden çok satırı hizalama

Ayrıca, ne kadar dolgu kullanacağını kabul eden tarayıcılara güvenmeyen bir çözüm istedim. Tamlık için sıralı bir liste ekledim.

Bu satır içi işlemi yaparak kenar boşluğunu 0 olarak ayarladım (ul style = "margin: -0px"). Mermiler, çıkıntı olmadan paragrafla hizalanır.