Soru Herhangi bir mermi olmadan sırasız bir listeye ihtiyacınız var


Sırasız bir liste oluşturdum. Sırasız listedeki mermilerin rahatsız edici olduğunu hissediyorum, bu yüzden onları kaldırmak istiyorum.

Mermi olmayan bir listenin olması mümkün mü?


2045
2018-06-22 13:57


Menşei




Cevaplar:


Mermileri list-style-type için none Üst öğe için CSS'de (genellikle <ul>), Örneğin:

ul {
  list-style-type: none;
}

Ayrıca eklemek isteyebilirsiniz padding: 0 ve margin: 0 bunun için, girintiyi de kaldırmak istiyorsan.

Görmek Listutorial liste biçimlendirme teknikleri için harika bir örnek.


3046
2018-06-22 14:00



IE9'da çalışmaz, reklam stili türü türüne ihtiyacınız vardır: yok; li - tovmeod
@robaker bunu doğru şekilde elde etmek için sadece 15 yıl aldı ve çoğu insan henüz IE10 kullanmıyor bile. İçimden ... Bir şekilde M $ 'dan nefret ediyorum. lol - Panama Jack
Kayıt için 2015 yılında IE9 için tasarım yapmıyoruz - Dom Vinyard
IE'yi de düşünürsek, bu yüzyılda hiçbir web sitesi tamamlanamaz. - Ankit
@DomVinyard Biz kayıt için hala 2016 yılında IE8 için tasarlıyoruz ... - Amy Barrett


Bootstrap kullanıyorsanız, "unstyled" sınıfı vardır:

Liste öğeleri için varsayılan liste stilini ve sol dolguyu kaldırın (yalnızca acil çocuklar).

Önyükleme 2:

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

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

Önyükleme 3 ve 4:

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

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


469
2017-07-11 15:05



Boostrap 3'te bu biraz değişti: class = "list-unstyled" - guido
Sadece bunları nerede okuyorsun merak ediyor musun? Onu arıyordum ama bulamadım. - Skytiger
@Skytiger getbootstrap.com/css/#type-lists - Danation
Bootstrap 3 sınıfı ayrıca Bootstrap 4 ile çalışır - Christophe Roussy
Aslında, bu cevap tam olarak aradığım şey. Ve Bootstrap tüm internetin% 3,6'sı tarafından kullanılıyor, bu yüzden düşmüyor. trends.builtwith.com/docinfo/Twitter-Bootstrap  Hızlı bir Google araması, Bootstrap'in "en popüler CSS çerçeveleri" kategorisine tutarlı bir şekilde yerleştirildiğini gösterir. - Bobort


Kullanmalısın list-style: none;

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

183
2018-06-22 14:00



Harika çözüm. CSS dosyasını düzenlemenizi gerektirmeyen bir çözüm arıyordum. Çok teşekkürler! - Kevin Groen
@Kevin: Bu inline CSS ... en iyi uygulamalar dikkate alındığında, bunu gerçekten bir CSS dosyasına koymalısınız. - aboveyou00
Özellikle CSS istenen formatı geçersiz kılıyorsa mükemmel çözüm. - Mohammed
Bu cevap Bootstrap olmadan çalışır. Ayrıca, ekstra bir * .css dosyası oluşturmaya gerek yoktur. Aslında bu, css kodunun tek bir html dosyasına nasıl yerleştirileceğinin tipik bir örneğidir. - anonymous
“en iyi uygulama” genellikle, seyircinin gözünde ve / veya belirli bir uygulamadadır. Bana yardımcı olan örnek, listelerin çoğunluğunun mermiyle iyi olduğu yer olsa da, belirli bir listede kendi simgelerini yapmak istedim. Satır içi satırlar yalnızca bir tane ile ilgilenirken, .css'nin değiştirilmesi tüm listeleri etkiler. Yani, bazen 'en iyi' ihtiyacınız olan noktada ihtiyacınız olan şeydir. - CFP Support


css olarak, stil,

 list-style-type: none;

49
2018-06-22 14:00





Bir stil eklemek zorunda kalacaksınız <ul> aşağıdaki gibi eleman:

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

Bu mermileri kaldıracaktır. CSS'yi yukarıdaki örneklerde olduğu gibi bir stil sayfasına da ekleyebilirsiniz.


43
2018-06-22 14:02



şimdi> 3.0'da .list-unstyled - Adam Pflantzer
> 3.0’da bunu li’ye de eklemeniz gerekebilir. - codechurn
@AdamPflantzer 3.0 nedir demek gerekiyordu. Sorulacak veya cevap vermeyecek bir bağlantı yok - Ghostwriter78
Bu cevapla ilgisi olmayan Bootstrap'a atıfta bulunuyor. - Bobort


css'de ...

ul {
   list-style:none;
}

41
2018-06-22 14:00





Yukarıdakilere küçük ayrıntılandırma: Ek satırlara yayılırsa daha uzun satırların daha okunabilir olmasını sağlamak için:

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

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

34
2017-12-10 05:55



Çalışır, ancak sadece IE8 için - Underverse


Aşağıdaki CSS'yi kullanın:

ul {
  list-style-type: none
}

34
2018-06-22 14:00





Yerli:

ul { list-style-type: none; }

Önyükleme:

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

Not: Liste grupları kullanıyorsanız, liste oluşturulmasına gerek yoktur.


17
2018-05-14 21:23





Mermileri çıkarmak için hem ul hem de li üzerinde liste tarzı kullandım. Mermileri özel bir karakterle değiştirmek istedim, bu durumda 'tire', bu da güzel bir etki yaratıyor. Bu işaretlemeyi kullanarak:

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

bu css ile:

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

metin sararken işe yarayan güzel girintili bir etki verir.


13
2017-09-17 04:52





Eğer yapamazsanız, <ul> seviye, yerleştirmek gerekebilir list-style-type: none; at <li> seviyesi:

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

Bu tekrarı önlemek için bir CSS sınıfı oluşturabilirsiniz:

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

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

DÜZENLEME: Gerektiğinde, kullanın !important:

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

13
2017-10-08 08:14