ChatGPT解决这个技术问题 Extra ChatGPT

I need an unordered list without any bullets

I have created an unordered list. I feel the bullets in the unordered list are bothersome, so I want to remove them.

Is it possible to have a list without bullets?


V
Vadim Ovchinnikov

You can remove bullets by setting the list-style-type to none on the CSS for the parent element (typically a <ul>), for example:

ul {
  list-style-type: none;
}

You might also want to add padding: 0 and margin: 0 to that if you want to remove indentation as well.

See Listutorial for a great walkthrough of list formatting techniques.


@tovmeod Seems to work fine in my IE9 (on Win7). (it is a complex page, not a simple POC, maybe something else changed the behavior)
If you are like me and also looking for how to remove the indent, see this - stackoverflow.com/a/13939142/846727
Oh, how many times I have come back here for the copy/paste :)
Nice touch on padding and margins
There is a much more elegant solution to display lists without bullets in the answer by @shaneb below. It makes use of the HTML5 object 'Description Lists'.
G
Giorgi Gvimradze

If you're using Bootstrap, it has an "unstyled" class:

Remove the default list-style and left padding on list items (immediate children only).

Bootstrap 2:

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

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

Bootstrap 3 and 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

Bootstrap 5: https://getbootstrap.com/docs/5.0/content/typography/#unstyled


If we listed classes for every CSS framework, we would have a mess on StackOverflow. A quick Google search reveals Bootstrap was only used by 2% of websites at its peak, and surely that's falling with the introduction of more sensible solutions like flexbox and css grid.
Actually, this answer is exactly what I was looking for. And Bootstrap is used by 3.6% of the entire Internet, so it's not falling. trends.builtwith.com/docinfo/Twitter-Bootstrap A quick Google search reveals that Bootstrap is consistently placed in the "most popular CSS frameworks" category.
@PJBrunet If we listed classes for every CSS framework, we would have much more people getting answers to their questions. Moreover, the OP didn't mention that he's interested only in a pure CSS solution.
Instead of class I would use id here if ul is unique. If not, stay with class.
j
johannchopin

You need to use list-style: none;

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

Be aware that inline css overrules css in files. Depending on the application/development practices it can be really annoying.
f
fish-404

Small refinement to the previous answers: To make longer lines more readable if they spill over to additional screen lines:

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

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

Works, but only for IE8
It's unnecessary to put list-style-type: none; on both the ul and the li. You can just do one.
P
Peter Mortensen

If you're unable to make it work at the <ul> level, you might need to place the list-style-type: none; at the <li> level:

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

You can create a CSS class to avoid this repetition:

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

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

When necessary, use !important:

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

Using !important is bad practice and unnecessary, if the code doesn't work make sure your new code is below the old one. In big projects when they want to make things dynamic !important can become very problematic.
D
Deni J.

I used list-style on both the ul and the li to remove the bullets. I wanted to replace the bullets with a custom character, in this case a 'dash'. That gives a nicely indented effect that works fine when the text wraps.

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

  • text
  • text


S
SK-the-Learner

If you wanted to accomplish this with pure HTML alone, this solution will work across all major browsers:

Description Lists

Simply using the following HTML:

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

Example here: https://jsfiddle.net/zumcmvma/2/

Reference here: https://www.w3schools.com/tags/tag_dl.asp


If you're going to use this method, use the semantically proper way of entering a term to be defined in <dt> and the definition of that term in <dd>.
This is the best answer to the question, although the people who pose this question are unaware of this much more elegant solution, so they would dissagree, but this solution produces the best results.
P
Peter Mortensen

To completely remove the ul default style:

    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;

f
fish-404

This orders a list vertically without bullet points. In just one line!

li {
    display: block;
}

Technical note: this works because it overrides the default display value of <li>, which is display: list-item;.
A
Abuhanzala Rehanansari
ul{list-style-type:none;}

Just set the style of unordered list is none.


Is there something new in this answer that wasn't already said?
V
Vthechamp

If you are developing an existing theme, it's possible that the theme has a custom list style.

So if you cant't change the list style using list-style: none; in ul or li tags, first check with !important, because maybe some other line of style is overwriting your style. If !important fixed it, you should find a more specific selector and clear out the !important.

li {
    list-style: none !important;
}

If it's not the case, then check the li:before. If it contains the content, then do:

li:before {
    display: none;
}

m
m4n0

You can hide them using ::marker pseudo-element.

Transparent ::marker

ul li::marker {
  color: transparent;
}

ul li::marker { color: transparent; } ul { padding-inline-start: 10px; /* Just to reset the browser initial padding */ }

  • Bullets are bothersome
  • I want to remove them.
  • Hey! ::marker to the rescue

::marker empty content

ul li::marker {
  content: "";
}

ul li::marker { content: ""; }

  • Bullets are bothersome
  • I want to remove them
  • Hey! ::marker to the rescue

It is better when you need to remove bullets from a specific list item.

ul li:nth-child(n)::marker { /* Replace n with the list item's position*/
   content: "";
}

ul li:not(:nth-child(2))::marker { content: ""; }

  • Bullets are bothersome
  • But I can live with it using ::marker
  • Not again though


O
Oracular Man
 <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>

P
Peter Mortensen

I tried and observed:

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

This doesn't actually remove the bullets. They just get pushed off-screen.
P
Peter Mortensen

In case you want to keep things simple without resorting to CSS, I just put a &nbsp; in my code lines. I.e., <table></table>.

Yeah, it leaves a few spaces, but that's not a bad thing.


-1 Simple? Without CSS? This is why many websites are in the shocking state they are. CSS adds simplicity. Tables are not the way forward.