Vraag Een ongeordende lijst nodig zonder kogels


Ik heb een ongeordende lijst gemaakt. Ik vind dat de kogels in de ongeordende lijst hinderlijk zijn, dus ik wil ze verwijderen.

Is het mogelijk om een ​​lijst zonder kogels te hebben?


2039
2018-06-22 13:57


oorsprong


antwoorden:


U kunt kogels verwijderen door de list-style-type naar none op de CSS voor bovenliggende element (meestal een <ul>), bijvoorbeeld:

ul {
  list-style-type: none;
}

Je zou ook willen toevoegen padding: 0 en margin: 0 daarvoor, als u ook de inspringing wilt verwijderen.

Zien Listutorial voor een geweldige doorloop van opmaaktechnieken voor lijsten.


3031
2018-06-22 14:00



Als u Bootstrap gebruikt, heeft het een klasse "unstyled":

Verwijder de standaardlijststijl en linker opvulling op lijstitems (alleen voor directe kinderen).

Bootstrap 2:

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

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

Bootstrap 3 en 4:

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

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


466
2017-07-11 15:05



Je moet gebruiken list-style: none;

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

183
2018-06-22 14:00



in css, stijl,

 list-style-type: none;

49
2018-06-22 14:00



Je zou een stijl moeten toevoegen aan de <ul> element zoals het volgende:

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

Dat zal de kogels verwijderen. Je zou ook de CSS in een stylesheet kunnen toevoegen zoals de bovenstaande voorbeelden.


43
2018-06-22 14:02



in css ...

ul {
   list-style:none;
}

41
2018-06-22 14:00



Kleine verfijning van het bovenstaande: om langere lijnen leesbaarder te maken als ze overslaan naar extra schermlijnen:

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

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

34
2017-12-10 05:55



Gebruik de volgende CSS:

ul {
  list-style-type: none
}

34
2018-06-22 14:00



Native:

ul { list-style-type: none; }

bootstrap:

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

Notitie: Als je lijstgroepen gebruikt, is er geen behoefte aan lijst-unstyled.


17
2018-05-14 21:23



Ik gebruikte list-style op zowel de ul als de li om de kogels te verwijderen. Ik wilde de kogels vervangen door een aangepast personage, in dit geval een 'streepje', dat een leuk effect geeft. Dus met behulp van deze markup:

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

met deze CSS:

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

geeft een mooi ingesprongen effect dat werkt wanneer de tekst wordt ingepakt


13
2017-09-17 04:52