Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsSome links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If an HTML list has no bullets even though you set list-style-type: disc, check the list item’s computed display value. A rule such as li { display: block; } or display: inline removes the list-item display behavior that generates native markers. Usually, remove that override; if you need to set it explicitly, use display: list-item.
The minimal fix
This list should display native bullets:
<ul class="features">
<li>One</li>
<li>Two</li>
</ul>But this CSS suppresses them:
.features {
list-style-type: disc;
}
.features li {
display: block;
}Remove the unnecessary display declaration, or restore the list-item display type:
.features li {
display: list-item;
}Browsers give native <li> elements a default display of list-item. For an ordinary vertical list, you can leave that behavior alone and style spacing instead:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
.features li {
line-height: 1.6;
margin-block-end: 0.75rem;
}MDN’s list indentation guide describes the default list-item behavior. The key distinction is that list-style-type selects the marker’s appearance; it does not change an element’s display type. A filled circle needs a list item that generates a marker.
#1 Best Overall
Why list-style-type: disc may not help
These CSS properties do different jobs:
list-style-type: disc; /* marker design */
display: list-item; /* generates list-item behavior and a marker */If a competing rule changes an <li> to block, inline, inline-block, flex, or grid, setting list-style-type: disc alone does not restore its marker. The HTML element remains an <li>, but its CSS display behavior has changed. See MDN’s list-style-type reference and CSS list fundamentals.
Check for a navigation style leaking into content
A common source of the problem is a broad rule written for a horizontal menu:
.main-menu ul li {
display: inline;
list-style: none;
}That rule intentionally puts menu items on one line and removes their markers. If it also matches an article list, the article’s bullets disappear. Removing another rule such as display: block may expose the menu’s display: inline rule, which explains why the items suddenly appear on one line.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #2
Keep navigation and content-list styles scoped to their own components:
<nav class="main-menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
<section class="article">
<ul>
<li>Readable list item</li>
<li>Another list item</li>
</ul>
</section>/* Navigation: no bullets by design */
.main-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.main-menu li {
display: inline-block;
}
/* Article: retain native markers */
.article ul {
list-style-type: disc;
padding-inline-start: 2rem;
}
.article li {
display: list-item;
margin-block-end: 0.75rem;
}A component-scoped rule is safer than a global selector such as ul li { display: inline; }, which can affect every list on the page.
Check the cascade, not just the line order
When several rules set display, the CSS cascade determines which one wins. Selector specificity can beat source order; a later rule wins only when the competing declarations have equal importance and specificity.
ul li {
display: inline;
}
.article ul li {
display: list-item;
}The second selector is more specific, so it can restore list-item behavior inside .article. This weaker rule may not:
Recommended Free Tools
ul li {
display: inline;
}
li {
display: list-item; /* less specific: may lose */
}In DevTools, inspect the winning declaration rather than repeatedly moving CSS to the bottom of a stylesheet or reaching first for !important. Prefer removing an overly broad rule or adding a properly scoped correction. The historical SitePoint forum thread behind this question illustrates this kind of conflict: a menu rule set list items to inline and removed their list style, so a later repair had to account for that rule’s selector.
Check whether a list reset removed the marker
A reset or theme may set list-style: none on lists or list items:
ul,
ol {
list-style: none;
}Restore the intended style on the content list:
.article ul {
list-style-type: disc;
}
.article ol {
list-style-type: decimal;
}
.article li {
display: list-item;
}The list-style shorthand can set marker type, image, and position. If you use an image marker, keep a suitable type as a fallback in case the image cannot load. An explicit project style is often easier to maintain than revert, which returns a property toward user-agent or user styles.
When the marker exists but is hard to see
Not every missing-looking bullet is a missing marker. Look for transparent or zero-sized marker styling, hidden text, or clipping:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →::marker {
color: transparent;
}
li::marker {
font-size: 0;
}
li {
color: transparent;
}Also inspect list indentation and overflow. With the default list-style-position: outside, the marker sits outside the list item’s principal block box. Removing the list’s padding or clipping its container can put a visible marker beyond the area you can see.
For a temporary diagnostic, force an obvious marker and position it inside:
.debug ul {
list-style: disc;
list-style-position: inside;
padding-inline-start: 2rem;
}
.debug li::marker {
color: red;
font-size: 1em;
}If the marker appears after this change, investigate its original color, size, position, padding, or clipping. MDN’s list-style-position reference explains the difference between inside and outside.
Using flexbox or grid without losing the marker
Applying flex or grid directly to the <li> can remove its list-item marker:
li {
display: flex;
}Keep the list item as a list item and apply the layout to a child wrapper:
<ul>
<li>
<div class="item-content">
<strong>Title</strong>
<span>Description</span>
</div>
</li>
</ul>li {
display: list-item;
}
.item-content {
display: flex;
align-items: center;
gap: 0.5rem;
}A quick DevTools checklist
- Inspect the affected
<li>and check its computeddisplay. For a native marker, it needs to belist-item. - Check computed
list-style-typeandlist-style. Look fornoneor an unexpectedlist-style-image. - Inspect matched rules for broad selectors such as
li,ul li,.menu li, andul, ol. - Check
::markerstyling, text color, font size, visibility, opacity, overflow, andpadding-inline-start. - Disable suspicious declarations temporarily, one at a time, to identify the rule that changes the result.
Keep real lists semantic
Use <ul> or <ol> with <li> children for list content. Replacing a list with unrelated <div> elements and drawing bullets with pseudo-elements may imitate the appearance but can lose list semantics for assistive technology and other user agents.
Removing markers with list-style: none is appropriate for a menu when that is the intended design, but accessibility behavior can vary by browser and assistive-technology combination. MDN documents a list-recognition caveat for Safari when list-style-type: none is used. Test the actual experience rather than assuming identical behavior everywhere.
Quick Recap
Repair patterns at a glance
| Symptom | Likely cause | First thing to try |
|---|---|---|
| Vertical text, no bullets | display is not list-item, or the list style is none |
Remove the display override and restore a visible list style |
| Items become horizontal | A menu rule sets display: inline or inline-block |
Scope that rule to the navigation component |
| Bullets are far from the text | List indentation was removed or changed | Set appropriate padding-inline-start |
Bullets show only with inside |
Outside markers may be clipped or outside the visible area | Check padding, overflow, and container width |
| Bullets vanish after adding flex | Flex was applied to the <li> |
Keep the <li> as list-item; flex an inner wrapper |
| A repair rule has no effect | A more specific rule wins | Inspect computed styles and correct the conflicting selector |
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
