web-dev-qa-db-fra.com

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

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

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

htmlcss
2356
praveenjayapal

Vous pouvez supprimer les puces en définissant le paramètre list-style-type sur none sur le fichier CSS de l'élément parent (généralement un _<ul>_), par exemple:

_ul {
  list-style-type: none;
}
_

Vous voudrez peut-être aussi ajouter _padding: 0_ et _margin: 0_ si vous souhaitez également supprimer l'indentation.

Voir Listutorial pour un survol des techniques de formatage de liste.

3491
Paul Dixon

Si vous utilisez Bootstrap, il a une classe "unstyled":

Supprimez le style de liste par défaut et le remplissage gauche des éléments de 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

554
Scott Stafford

Vous devez utiliser list-style: none;

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

En CSS, style,

 list-style-type: none;
52
Haim Evgi

Vous devrez ajouter un style à l'élément <ul> comme suit:

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

Cela supprimera les balles. Vous pouvez également ajouter le CSS dans une feuille de style, comme dans les exemples des réponses précédentes.

45
DanO

En CSS ...

ul {
   list-style: none;
}
42
Tim Hoolihan

Petit raffinement par rapport aux 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;}
37
charliehoward

Utilisez le CSS suivant:

ul {
  list-style-type: none
}
36
Ole Spaarmann

Natif:

ul { list-style-type: none; }

Bootstrap:

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

Remarque: Si vous utilisez des groupes de listes, il n'est pas nécessaire d'utiliser liste-non-stylé.

18
Cody

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

<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>
14
Antonio Ooi

J'ai utilisé le style de liste sur le ul et le li pour supprimer les balles. Je voulais remplacer les balles par un caractère personnalisé, dans ce cas un "tiret". Cela donne un bel effet. Donc, en utilisant ce balisage:

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

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

donne un effet bien mis en retrait qui fonctionne lorsque le texte est enveloppé.

12
Chris Halcrow

CSS:

.liststyle {
    list-style-type: none;
}

HTML:

<ul class="liststyle">
    <li>Test</li>
</ul>
6
Jijo Paulose

Tu peux essayer ça

ul {
  list-style: none
}
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
</ul>
3
Prince

Code CSS

ul
{
    list-style-type: none;
}

Code HTML

<ul>
    <li><a href="#">Item One</a></li>
    <li><a href="#">Item Two</a></li>   
</ul>
2
Arun

Vous pouvez supprimer puces en utilisant le code suivant CSS:

    ul {
         list-style: none; //or list-style-type:none; 
       }

Vous pouvez même ajouter votre style de liste personnalisé comme:

li:before {
            content: '✔';
            color:red;
          }
2
Novice

Cette commande une liste verticalement sans points de balle. En une seule ligne!

li {
    display: block;
}
2
matt

Vous pouvez supprimer les puces à l’aide de style="list-style-type:none".

Essaye ça:

<ul style="list-style-type:none" >

     <li>op1</li>
     <li>op2</li>
     <li>op2</li>

</ul>
2
blackbird

Pour supprimer complètement le style par défaut ul:

    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;
1
Masih Jahangiri

Si vous voulez accomplir cela avec pur HTML seul, cette solution fonctionnera sur tous les principaux navigateurs:

Description Listes

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

1
ShaneB

J'ai essayé et observé:

header ul {
   margin: 0;
   padding: 0;
}
1
Dadhich Sourav
 <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>
0
Oracular Man

Le code ci-dessous est un bon exemple simple permettant de supprimer des puces pour une liste non ordonnée.

<!DOCTYPE html>
<html>
    <body>

    <h2>Unordered List without Bullets</h2>

    <ul style="list-style-type:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>

    </body>
</html>
0
James

Si vous utilisez ul dans un bloc div, alors

// HTML file
<div class="some-class">
    <ul>
        <li>One</li>
    </ul>
</div>

Dans votre feuille de style

.some-class ul {
       list-style: none;
}

Si vous utilisez simplement ul directement sans bloc de classe ou div:

//Style Sheet
ul {
    list-style: none;
}
0
Sree Ramana

Remplacez simplement votre list-style-type ou list-style dans votre classe par none pour le <li>.

Quelque chose comme ça:

li {
  list-style-type : none;
}

Aussi, pour plus d'informations, je liste toutes les propriétés que vous pouvez affecter à list-style-type, lancez le code ci-dessous pour afficher tous les résultats dans un seul objectif:

.none {
  list-style-type: none;
}

.disc {
  list-style-type: disc;
}

.circle {
  list-style-type: circle;
}

.square {
  list-style-type: square;
}

.decimal {
  list-style-type: decimal;
}

.georgian {
  list-style-type: georgian;
}

.cjk-ideographic {
  list-style-type: cjk-ideographic;
}

.kannada {
  list-style-type: kannada;
}

.custom:before {
  content: '◊ ';
  color: red;
}
<ul>
  <li class="none">none</li>
  <li class="disc">disc</li>
  <li class="circle">circle</li>
  <li class="square">square</li>
  <li class="decimal">decimal</li>
  <li class="georgian">georgian</li>
  <li class="cjk-ideographic">cjk-ideographic</li>
  <li class="kannada">kannada</li>
  <li class="none custom">custom</li>
</ul>
0
Alireza

Vous pouvez supprimer le "puces" en définissant le "list-style-type: none;" Like

ul
{
    list-style-type: none;
}

OR

<ul class="menu custompozition4"  style="list-style-type: none;">
    <li class="item-507"><a href=#">Strategic Recruitment Solutions</a>
    </li>

</ul>
0
Muhammad Awais