J'ai besoin d'une liste non ordonnée sans balles

J'ai créé une liste non ordonnée. Je pense que les balles dans la liste non ordonnée sont gênantes, donc je veux les supprimer.

Est-il possible d'avoir une liste sans puces?

Vous pouvez supprimer des balles en mettant l' list-style-typeà nonele CSS pour l'élément parent (typiquement <ul>), par exemple:

ul {
  list-style-type: none;
}

Vous pouvez également vouloir ajouter padding: 0et margin: 0à cela si vous souhaitez également supprimer l'indentation.

Consultez Listutorial pour une présentation détaillée des techniques de formatage de liste.

Si vous utilisez Bootstrap, il a une classe "sans style":

Supprimez le style de liste par défaut et le remplissage gauche des éléments de la liste (enfants immédiats uniquement).

Bootstrap 2:

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

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

Bootstrap 3 et 4:

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

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

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

Vous devez utiliser list-style: none;

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

Petit raffinement des réponses précédentes: Pour rendre les lignes plus longues plus lisibles si elles débordent sur des lignes d'écran supplémentaires:

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

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

Si vous ne parvenez pas à le faire fonctionner au <ul>niveau, vous devrez peut-être placer le list-style-type: none;au <li>niveau:

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

Vous pouvez créer une classe CSS pour éviter cette répétition:

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

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

Si nécessaire, utilisez !important:

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

J'ai utilisé le style de liste à la fois sur ul et li pour supprimer les balles. Je voulais remplacer les puces par un caractère personnalisé, dans ce cas un «tiret». Cela donne un effet joliment indenté qui fonctionne lorsque le texte s'enroule.

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>

Pour supprimer complètement le ulstyle par défaut:

    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;

Si vous vouliez accomplir cela uniquement avec du HTML pur , cette solution fonctionnera sur tous les principaux navigateurs:

Listes de description

En utilisant simplement le code HTML suivant:

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

Ce qui produira une liste similaire à la suivante:

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

Exemple ici: https://jsfiddle.net/zumcmvma/2/

Référence ici: https://www.w3schools.com/tags/tag_dl.asp

Cela ordonne une liste verticalement sans puces. En une seule ligne!

li {
    display: block;
}

si vous développez un thème existant, il est possible que le thème ait un style de liste personnalisé.

donc si vous ne pouvez pas changer le style de liste en utilisant les list-style: none;balises ul ou li, vérifiez d'abord !importantcar peut-être qu'une autre ligne de style écrase votre style, si! important l'a corrigé, vous devriez trouver un sélecteur plus spécifique et effacer le! important .

si ce n'est pas le cas, vérifiez li:beforepeut - être qu'il a le contenu. alors fais:

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>

J'ai essayé et observé:

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

Dans le cas où vous voulez garder les choses simples sans avoir recours au CSS, je viens de mettre un  dans mes lignes de code. -À- dire, <table></table>.

Oui, ça laisse quelques espaces, mais ce n'est pas une mauvaise chose.