Madde işareti olmayan sıralanmamış bir listeye ihtiyacım var

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

Madde işareti olmayan bir listeye sahip olmak mümkün müdür?

Sen ayarlayarak mermi kaldırabilir list-style-typeiçin none(genellikle bir üst elemanı için CSS üzerinde <ul>örneğin):

ul {
  list-style-type: none;
}

Girintiyi de kaldırmak istiyorsanız, eklemek padding: 0ve buna eklemek de isteyebilirsiniz margin: 0.

Liste biçimlendirme tekniklerinin mükemmel bir örneği için Listutorial'a bakın .

Bootstrap kullanıyorsanız, "stilsiz" bir sınıfa sahiptir:

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

Bootstrap 2:

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

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

Bootstrap 3 ve 4:

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

Önyükleme 3: http://getbootstrap.com/css/#type-lists

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

Kullanmalısın list-style: none;

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

Önceki yanıtlara küçük ayrıntılandırma: Ek ekran satırlarına yayılırsa daha uzun satırları daha okunabilir hale getirmek için:

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

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

Eğer çalışmak yapmak olanağınız yoksa <ul>düzeyinde, sen yerleştirmek gerekebilir list-style-type: none;at <li>seviyede:

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

Bu tekrardan kaçınmak 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>

Gerektiğinde, !importantşunları kullanın :

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

Mermileri çıkarmak için hem ul hem de li'de liste stili kullandım. Mermileri özel bir karakterle değiştirmek istedim, bu durumda bir 'çizgi'. Bu, metin sarıldığında işe yarayan hoş bir girintili efekt verir.

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>

ulVarsayılan stili tamamen kaldırmak için :

    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;

Bunu yalnızca saf HTML ile başarmak istiyorsanız , bu çözüm tüm büyük tarayıcılarda çalışır:

Açıklama Listeleri

Sadece aşağıdaki HTML'yi kullanarak:

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

Aşağıdakine benzer bir liste üretecektir:

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

Burada örnek: https://jsfiddle.net/zumcmvma/2/

Burada referans: https://www.w3schools.com/tags/tag_dl.asp

Bu, mermi noktaları olmadan dikey olarak bir liste düzenler. Sadece bir satırda!

li {
    display: block;
}

mevcut bir tema geliştiriyorsanız, temanın özel liste stiline sahip olması mümkündür.

bu yüzden list-style: none;ul veya li etiketlerini kullanarak liste stilini değiştiremezseniz , önce!important çünkü belki başka bir stil çizgisi stilinizin üzerine yazmaktadır.

durum böyle değilse li:before, içeriğe sahip olup olmadığını kontrol edin . o zaman yap:

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>

Denedim ve gözlemledim:

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

CSS'ye başvurmadan işleri basit tutmak istiyorsanız,  kod satırlarıma bir koydum . Yani <table></table>.

Evet, birkaç boşluk bırakıyor, ama bu kötü bir şey değil.