Ul List Style Not Applying

UL list style not applying

If I'm not mistaken, you should be applying this rule to the li, not the ul.

ul li {list-style-type: disc;}

List Style Type None not working

The reason your CSS is not working is because the list-style-type property must be attached to a display: list-item element such as li or ul. (As @andrewli stated you're targeting the wrong element).

You can do this like so

.naviMenu > ul li { // notice how I have targeted the li element(s) rather than the whole parent container
    list-style-type: none; // also, there is no need for !important 
}

Just as a little side note

This line of markup:

<ul>
    <div id="homePage"><li>Home</li></div>
    <!-- e.t.c. !-->
</ul>

Contains incorrect syntax. It should be done like so:

<ul>
    <li><div id="homePage">Home</div></li>
    <!-- e.t.c. !-->
</ul>

Hope this helps! :-)

CSS list-style-type not working

Because of your padding reset, the numbers are actually off to the left of the page. Try adding:

list-style-position: inside;

List style not working

It works fine here without changing your code, what wrong with this!

http://jsfiddle.net/NpQs5/

.span9 ul li { list-style: disc outside none; margin-left: 1em; }

HTML/CSS List Style Type Not Showing

Probably you forgot about something...

li {
    display: list-item;
}

In your code there is display:inline which isn't list item and haven't list styles.

css not working properly with ul and li items

You can't nest selectors in CSS like you can in LESS or SASS. Just expand your selector statement to .links li:

.links {
    display: flex;
    flex-direction: row;
    justify-content: center;
    list-style-type: none;
    font-family: Tahoma;
    margin: 0;
    padding: 0;
}

.links li {
    padding: 5px;
    cursor: pointer;
    font-weight: normal;
    font-size: 16px;
}

If you only wanted to target lis that are direct children of .links you'd use the child combinator: .links > li

list-style-item CSS is not applied to UL

I had a C# style comment just before the UL CSS:

//Shipping list <= BAD COMMENT
ul.shipping-list { ... }

Removing the comment fixed the problem

ul.shipping-list { ... }

Why is my HTML unordered list list-style-image not working?

You have to replace # with %23 in your SVGs:

  html,
  body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

#the-list li {
  margin: 2em 0;
}

#the-list li:first-child {
  color: red;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%2300800066" viewBox="0 0 16 16"><path d="M10.5 8a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0z"/><path d="M0 8s3-5.5 8-5.5S16 8 16 8s-3 5.5-8 5.5S0 8 0 8zm8 3.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z"/></svg>');
}

#the-list li:last-child {
  color: blue;
  font-weight: bold;
  list-style-type: none;
  list-style-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%23B2222266" viewBox="0 0 16 16"><path d="m10.79 12.912-1.614-1.615a3.5 3.5 0 0 1-4.474-4.474l-2.06-2.06C.938 6.278 0 8 0 8s3 5.5 8 5.5a7.029 7.029 0 0 0 2.79-.588zM5.21 3.088A7.028 7.028 0 0 1 8 2.5c5 0 8 5.5 8 5.5s-.939 1.721-2.641 3.238l-2.062-2.062a3.5 3.5 0 0 0-4.474-4.474L5.21 3.089z"/><path d="M5.525 7.646a2.5 2.5 0 0 0 2.829 2.829l-2.83-2.829zm4.95.708-2.829-2.83a2.5 2.5 0 0 1 2.829 2.829zm3.171 6-12-12 .708-.708 12 12-.708.708z"/></svg>');
}

<div id="container">
  <div id="content">
    <ul id="the-list">
      <li>FIRST ... <span>word</span></li>
      <li>LAST ... <span>word</span></li>
    </ul>
  </div>
</div>

Why does list-style-type not work ? Nothing was shown instead

The list-style-type property applies to elements with display: list-item only. So if you want to put some markers before list items that you have turned to inline elements, you have to add markers into the content directly, or via generated content. E.g., the following puts a bullet “•” and a space before each item:

#navbar ul li:before {
   content: "\2022  "
}

---

Related Topics