Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If a list item has display: inline, its native bullet or number disappears because it is no longer a list-item. list-style-type does not create markers on an ordinary inline box. Remove the override or restore display: list-item; for a horizontal list, put the parent list in a flex or grid layout instead.
The failing rule
li {
display: inline;
list-style-type: disc;
}Normally, a <li> has a user-agent style equivalent to display: list-item. That display type causes the browser to generate a ::marker pseudo-element. Changing the item to display: inline changes it into an ordinary inline box, so there is no list-item marker for list-style-type to style.
The decisive requirement is list-item, not block layout. A marker does not require the item to be a block; it does require the computed display value to include the list-item type. See the CSS Lists and Counters specification and MDN’s list-style-type reference.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Quickest repair
Delete the rule that changed the item to inline, or restore the list-item display:
#1 Best Overall
li {
display: list-item;
list-style-type: disc;
}You can set the style on the parent because list-style-type is inherited:
ul {
list-style-type: square;
}
/* Useful when individual items need different markers */
ul li.special {
list-style-type: "→ ";
}In DevTools, inspect the <li> and open Computed. Its display should be list-item. If another stylesheet wins the cascade, fix the selector or source rule rather than immediately adding !important:
nav ul li {
display: list-item;
}Make the list horizontal without changing the children to inline
The usual mistake is to use inline list items to create a row. Let the parent control layout and keep each child as a list item.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
Horizontal list with native markers
<ul class="menu">
<li><a href="/one">One</a></li>
<li><a href="/two">Two</a></li>
<li><a href="/three">Three</a></li>
</ul>.menu {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-inline-start: 2rem;
}
.menu > li {
display: list-item;
list-style-type: square;
}Here ul { display: flex; } changes the arrangement of the children; it does not remove their list-item display type.
Horizontal navigation without bullets
.menu {
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
padding-inline-start: 0;
list-style: none;
}
.menu > li {
display: block;
}Use this when the design is navigation rather than a visibly bulleted list. Keep the semantic <ul> and <li> structure.
Grid or legacy inline-block
Grid is useful when columns need alignment:
.menu {
display: grid;
grid-auto-flow: column;
gap: 1.25rem;
}inline-block can create a row in older layouts, but it is not a list-item display type, so native markers should not be expected:
.menu > li {
display: inline-block;
margin-inline-end: 1rem;
}If the marker is still missing
- Check for a reset: search for
list-style: noneandlist-style-type: noneon the list or item. Restore the values explicitly:ul.example { list-style: disc outside; } ul.example > li { display: list-item; } - Check
list-style-image: a non-noneimage can take precedence over the type marker. - Check color and visibility: markers normally use the element’s computed
color. A white marker on a white background, oropacity: 0, can make it appear absent. - Check indentation and clipping: outside markers can sit beyond the principal content box. A zeroed
padding-inline-startor an ancestor withoverflow: hiddencan hide or clip them. Trypadding-inline-start: 2remorlist-style-position: inside. - Check the selector and markup: the rule must reach the actual nested
<li>. An ordinary list item belongs inside<ul>,<ol>, or<menu>; a standalone<li>is invalid HTML.
A temporary diagnostic rule can reveal a cascade or color problem:
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11li {
display: list-item !important;
list-style: square outside !important;
color: black !important;
}If that restores the marker, remove the temporary declarations and identify the original conflicting rule.
list-style-position changes placement, not existence
li {
display: list-item;
list-style-type: square;
list-style-position: inside;
}inside places the marker at the start of the item’s content; outside (the usual default) places it outside the principal content box. This property cannot revive a marker on an element that is still display: inline. Details vary with writing mode and browser layout; see MDN’s list-style-position documentation.
::marker versus ::before
| Feature | ::marker |
::before |
|---|---|---|
Requires display: list-item |
Yes | No |
| Native list marker | Yes | No; visual generated content |
| Works on arbitrary inline elements | No | Yes |
| Best use | Bullets, numbers, and native marker styling | Decorative separators or complex custom visuals |
For native markers, retain list-item display and style ::marker:
li {
display: list-item;
list-style-type: disc;
}
li::marker {
color: tomato;
font-weight: 700;
}You can also set marker content directly:
li::marker {
content: "✓ ";
color: green;
}Use ::before when the item intentionally remains inline, such as compact tags or breadcrumbs:
.tags {
list-style: none;
padding-inline-start: 0;
}
.tags > li {
display: inline;
}
.tags > li:not(:last-child)::after {
content: " • ";
color: #777;
}Generated content is a visual substitute, not automatically equivalent to a native marker. Preserve real list markup when the content is genuinely a list.
About display: inline list-item
Modern CSS defines a multi-keyword form such as:
li {
display: inline list-item;
}This expresses both an inline outer display and the list-item type, but it is an advanced option. Test it against the browsers and wrapping behavior you support. Flexbox is generally the clearer, more predictable production solution, especially for navigation and responsive rows.
Copy-paste recipes
Vertical native list
ul {
list-style: disc outside;
}
ul > li {
display: list-item;
}Horizontal list with markers
ul {
display: flex;
gap: .75rem 1.25rem;
padding-inline-start: 2rem;
}
li {
display: list-item;
list-style-type: disc;
}Breadcrumb-style separators
ul {
display: flex;
padding: 0;
list-style: none;
}
li + li::before {
content: "/";
margin-inline: .75rem;
color: #777;
}Custom ordered numbering
ol.custom {
list-style: none;
counter-reset: item;
}
ol.custom > li {
counter-increment: item;
}
ol.custom > li::before {
content: counter(item) ". ";
}Native ordered-list numbering is preferable when it meets the design. Counters and generated markers give more visual control but make the author responsible for presentation and accessibility details.
Bottom line
display: inline hides the native marker because it removes the element’s list-item display type. Restore display: list-item for native bullets, or use flexbox/grid on the parent to make the list horizontal. Use ::marker for native marker customization and ::before only when a deliberate visual substitute is appropriate.
Recommended Free Tools
Quick Recap
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.
