I want to have an &quot;inside&quot; list with list bullets or decimal numbers being all flush with superior text blocks. Second lines of list entries have to have the same indent like the first row!

**E.g.:**

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. Aenean Aenean massa. 
    Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Donec quam felis,
    
    1. Text
    2. Text
    3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
       second line of longer Text
    4. Text

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Aenean commodo ligula eget dolor. 

CSS provides only two values for its &quot;list-style-position&quot; - inside and outside. With &quot;inside&quot; second lines are flush with the list points not with the superior line:

    3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
    second line of longer Text
    4. Text

Width &quot;outside&quot; my list is not flush with superior text blocks anymore.

Experiments width text-indent, padding-left and margin-left work for unordered lists but they fail for ordered lists because it depends on the list-decimal&#39;s number of characters:

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
     Aenean commodo ligula eget dolor. 

     3. longer Text, longer Text, longer Text, longer Text, longer Text, longer Text
        second line of longer Text
     4. Text
    11. Text
    12. Text

&quot;11.&quot; and &quot;12.&quot; aren&#39;t flush with the superior text block compared to &quot;3.&quot; and &quot;4.&quot;.

So where&#39;s the secret about ordered lists and the second-line-indent? Thank&#39;s for your effort!


How to keep indent for second line in ordered lists via CSS?

I&#39;m trying to do something that used to be really easy before the `start` attribute on ol tags was deprecated. I&#39;d just like to have a pair of ordered lists in my page, but start the numbering of the second list where the first one finished. Something like:

    1. do stuff
    2. do stuff
    
    Here&#39;s a paragraph
    
    3. do stuff

I&#39;ve seen that the `counter-reset` and `counter-increment` CSS properties should be able to achieve this, but I can&#39;t get it working. Here&#39;s my code so far:

    &lt;html&gt;
    &lt;head&gt;
      &lt;style type=&quot;text/css&quot;&gt;
        ol li { counter-increment: mycounter; }
        ol.start { counter-reset: mycounter; }
        ol.continue { counter-reset: mycounter 2; }
      &lt;/style&gt;
    &lt;/head&gt;
    
    &lt;body&gt;
      &lt;ol class=&quot;start&quot;&gt;
        &lt;li&gt;You can&#39;t touch this&lt;/li&gt;
        &lt;li&gt;You can&#39;t touch this&lt;/li&gt;
      &lt;/ol&gt;
      &lt;p&gt;STOP! Hammer time.&lt;/p&gt;
      &lt;ol class=&quot;continue&quot;&gt;
        &lt;li&gt;You can&#39;t touch this&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/body&gt;
    &lt;/html&gt;

To be honest, even if that worked, it wouldn&#39;t be ideal. I don&#39;t want to have to specify the number reached by the first list in my `ol.continue` selector.

What am I doing wrong? What&#39;s the minimal HTML/CSS combination required to achieve the desired effect?

How to start a new list, continuing the numbering from the previous list?

I have a list:

    &lt;ul&gt;
        &lt;li&gt;milk&lt;/li&gt;
        &lt;li&gt;butter&lt;/li&gt;
        &lt;li&gt;eggs&lt;/li&gt;
        &lt;li&gt;orange juice&lt;/li&gt;
        &lt;li&gt;bananas&lt;/li&gt;
    &lt;/ul&gt;

Using javascript how can I reorder the list items randomly?

javascript - shuffle HTML list element order

I&#39;d like to create a multi column list like this:
https://jsfiddle.net/37dfwf4u/

No problem when using a different list for each column:

    &lt;ul&gt;
        &lt;li&gt;item1&lt;/li&gt;
        &lt;li&gt;item2&lt;/li&gt;
        &lt;li&gt;item3&lt;/li&gt;
        &lt;li&gt;item4&lt;/li&gt;
    &lt;/ul&gt;
    &lt;ul&gt;
        &lt;li&gt;item5&lt;/li&gt;
        &lt;li&gt;item6&lt;/li&gt;
        &lt;li&gt;item7&lt;/li&gt;
        &lt;li&gt;item8&lt;/li&gt;
    &lt;/ul&gt;
    
&lt;!-- language: lang-css --&gt;

    ul {
        display:inline-block;
    }



However, can this be done by a continuous list and pure CSS so that the CSS arranges the columns automatically?
E.g. by use of flex layout which I&#39;m not yet familiar with?

How can I create multi columns from a single unordered list?

Is it possible to change the size of an `&lt;li&gt;` element&#39;s *bullet*?

*Take a look at the code below:*

    li {
        list-style: square; // I want to change the size of this squared bullet. 
    }

I can&#39;t seem to find any way to achieve that.

Customize list item bullets using CSS

I have set this:

    list-style: none outside none;

And HTML:

    &lt;ul class=&quot;menu custompozition4&quot;&gt;
        &lt;li class=&quot;item-507&quot;&gt;&lt;a href=#&quot;&gt;Strategic Recruitment Solutions&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-508&quot;&gt;&lt;a href=&quot;#&quot;&gt;Executive Recruitment&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-509&quot;&gt;&lt;a href=&quot;#&quot;&gt;Leadership Development&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-510&quot;&gt;&lt;a href=&quot;#&quot;&gt;Executive Capability Review&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-511&quot;&gt;&lt;a href=&quot;#&quot;&gt;Board and Executive Coaching&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-512&quot;&gt;&lt;a href=&quot;#&quot;&gt;Cross Cultutral Coaching&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-513&quot;&gt;&lt;a href=&quot;#&quot;&gt;Team Enhancement &amp;amp; Coaching&lt;/a&gt;
        &lt;/li&gt;
        &lt;li class=&quot;item-514&quot;&gt;&lt;a href=&quot;#&quot;&gt;Personnel Re-deployment&lt;/a&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

but even though bullets are displayed. (I&#39;m not quite sure that those are ul&#39;s bullets, because when you hover the text the &quot;bullets&quot; get underlined.)

Image Demo:
 https://i.imgur.com/2wsnBqP.png

__The third level from the menu__ 


Removing &quot;bullets&quot; from unordered list &lt;ul&gt;

With the following HTML, what is the easiest method to display the list as two columns?

    &lt;ul&gt;
    	&lt;li&gt;A&lt;/li&gt;
    	&lt;li&gt;B&lt;/li&gt;
    	&lt;li&gt;C&lt;/li&gt;
    	&lt;li&gt;D&lt;/li&gt;
    	&lt;li&gt;E&lt;/li&gt;
    &lt;/ul&gt;

Desired display:

    A B
    C D
    E

The solution needs to work with Internet Explorer.

How to display an unordered list in two columns?

Is there a way to create a list-style in HTML with a dash (i.e. - or &amp;ndash; `&amp;ndash;` or &amp;mdash; `&amp;mdash;`) i.e.

    &lt;ul&gt;
      &lt;li&gt;abc&lt;/li&gt;
    &lt;/ul&gt;

Outputting:

    - abc

It&#39;s occurred to me to do this with something like `li:before { content: &quot;-&quot; };`, though I don&#39;t know the cons of that option (and would be much obliged for feedback).

More generically, I wouldn&#39;t mind knowing how to use generic characters for list items.


HTML list-style-type dash

I&#39;d like to control how much horizontal space a bullet pushes its `&lt;li&gt;` to the right in an `&lt;ol&gt;` or `&lt;ul&gt;`.

That is, instead of always having

    *  Some list text goes
       here.

I&#39;d like to be able to change that to be

    *         Some list text goes
              here.

or
 
    *Some list text goes
     here.

I looked around but could only find instructions for shifting the entire block left or right, for example, http://www.alistapart.com/articles/taminglists/

CSS: Control space between bullet and &lt;li&gt;

I have the following list:

     &lt;ul id=&quot;otis&quot;&gt;
     &lt;li&gt;Benz&lt;/li&gt;
     &lt;li&gt;Other Benz&lt;/li&gt;
     &lt;li&gt;Other Other Benz&lt;/li&gt;
     &lt;/ul&gt;

I want to get rid the bullets so i tried:

     ul#otis {
     list-style-type: none;
     }

That didn&#39;t work though. What is the proper way to remove the bullets from the displayed list?



Getting rid of bullet points from &lt;ul&gt;

I cannot seem to remove the indent from my unordered list when long lines in my list wrap around. Here is what my list looks like:

* Windows users can use putty
* Mac users can use the Terminal.app
* Linux users can use SSH userid@ourserver.com port 22
* ...........&gt;Or use an SFTP program like Cyberduck just point it at 
  .........................................&gt;ourserver.com, port 22

(the dots show the indents)

I&#39;ve read a bunch of solutions and tried setting margin and padding to zero, using text-indent, list-style, but nothing works. I think the problem is that there is a heading above the list that I need to be centered and so I&#39;m setting the margins to auto and then it&#39;s messing up the list below. But even if I put say two divs inside the parent div it doesn&#39;t work.

Here is the HTML/CSS (I included everything in case there is some setting that is causing all of the other solutions to fail)

    &lt;div id=&quot;info&quot;&gt;
    	&lt;p&gt;&lt;strong&gt;Did you know you can SSH directly to ourserver.com?&lt;/strong&gt; &lt;/p&gt; 
        &lt;ul&gt;
        	&lt;li&gt;Windows users can use putty&lt;/li&gt;
            &lt;li&gt;Mac users can use the &lt;a href=&quot;http://www.terminfo.org&quot;&gt;Terminal.app&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;Linux users can use SSH userid@ourserver.com port 22&lt;/li&gt;
            &lt;li&gt;Or use an SFTP program like &lt;a href=&quot;http://cyberduck.ch/&quot;&gt;Cyberduck&lt;/a&gt; just point it at ourserver.com, port 22&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    
    #info {
    	color:#FFFFFF;
    	width:440px;
    	margin-left:auto;
    	margin-right:auto;
    	border-radius: 10px;
    	border-style:solid;
    	border-width:2px;
    	border-color:#FFF; 
    	padding-bottom:20px; padding-left:20px; padding-right:20px;
    	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    	overflow: hidden;
    }
    #info ul li { 
    	float:left;
    }



Removing ul indentation with CSS

Is there a way to adjust the position of list-style-image?

When I use padding for list items the image will stay at its position and won&#39;t move with padding...


Adjust list style image position?

I am wondering if it&#39;s possible to utilize font-awesome (or any other iconic font) classes to create a custom `&lt;li&gt;` list-style-type?

I am currently using jQuery to do this, ie:
    
    $(&quot;li.myClass&quot;).prepend(&quot;&lt;i class=\&quot;icon-chevron-right\&quot;&gt;&lt;/i&gt;&quot;);

However, this doesn&#39;t style properly when the `&lt;li&gt;` text wraps across the page as it considers the icon to be part of the text, not the actual bullet-indicator.

Any tips?

Custom li list-style with font-awesome icon

Within a `&lt;ul&gt;` element, clearly the vertical spacing between lines can be formatted with the line-height attribute.

My question is, within a `&lt;ul&gt;` element, how do I set the vertical spacing between the list items?

How do I set vertical space between list items?

I know that `DIV` inside `LI` isn&#39;t allowed, but I&#39;ve seen it lately on many &quot;big&quot; websites like *Smashing Magazine*, *Web Designer Wall*... etc.

I tried to validate sites, and they have errors, but nothing about `DIV` in `LI`?!

So can I use it inside `LI`, and I need it to be valid?


Is div inside list allowed?

My webpage has a &#39;skinny&#39; list: for example, a list of 100 items of one word in length each. To reduce scrolling, I want to present this list in two or even four columns on the page. How should I do this with CSS?

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
        &lt;li&gt;Item&lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;

I prefer the solution to be flexible so that if the list grows to 200 items, I don&#39;t have to do a lot of manual adjustments to accommodate the new list.

Is there a way to break a list into columns?

I forgot the jQuery command that will clear all list elements from a list. I did a bit of searching, done it a bunch of times before, but just simply forgot the command.

    $(&quot;ul&quot;).clear()
    $(&quot;ul&quot;).empty()

both didn&#39;t seem to accomplish this.. which command is it again?

UPDATE:  
Thanks guys, I must have some syntax error on my selector.

jQuery remove all list items from an unordered list

I have been searching for the list of tags that are available inside a `&lt;li&gt;`, but I couldn&#39;t find any reference.

Is it possible that any standards-compliant HTML 4+ block element is allowed in them?


What are the allowed tags inside a &lt;li&gt;?

This has been bothering me for a while, and I&#39;m wondering if there&#39;s any consensus on how to do this properly. When I&#39;m using an HTML list, how do I semantically include a header for the list?

One option is this:

&lt;!-- language: lang-html --&gt;

    &lt;h3&gt;Fruits I Like:&lt;/h3&gt;
    &lt;ul&gt;
        &lt;li&gt;Apples&lt;/li&gt;
        &lt;li&gt;Bananas&lt;/li&gt;
        &lt;li&gt;Oranges&lt;/li&gt;
    &lt;/ul&gt;

but semantically the `&lt;h3&gt;` heading is not explicitly associated with the `&lt;ul&gt;`

Another option is this:

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;li&gt;&lt;h3&gt;Fruits I Like:&lt;/h3&gt;&lt;/li&gt;
        &lt;li&gt;Apples&lt;/li&gt;
        &lt;li&gt;Bananas&lt;/li&gt;
        &lt;li&gt;Oranges&lt;/li&gt;
    &lt;/ul&gt;

but this seems a bit dirty, as the heading is not really one of the list items.

This option is not allowed by the W3C:

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;h3&gt;Fruits I Like:&lt;/h3&gt;
        &lt;li&gt;Apples&lt;/li&gt;
        &lt;li&gt;Bananas&lt;/li&gt;
        &lt;li&gt;Oranges&lt;/li&gt;
    &lt;/ul&gt;

as `&lt;ul&gt;`&#39;s can only contain one or more `&lt;li&gt;`&#39;s

The old &quot;list heading&quot; `&lt;lh&gt;` makes the most sense

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;lh&gt;Fruits I Like:&lt;/lh&gt;
        &lt;li&gt;Apples&lt;/li&gt;
        &lt;li&gt;Bananas&lt;/li&gt;
        &lt;li&gt;Oranges&lt;/li&gt;
    &lt;/ul&gt;

but of course it&#39;s not officially part of HTML

I&#39;ve heard it suggested that we use `&lt;label&gt;` just like a form:

&lt;!-- language: lang-html --&gt;

    &lt;ul&gt;
        &lt;label&gt;Fruits I Like:&lt;/label&gt;
        &lt;li&gt;Apples&lt;/li&gt;
        &lt;li&gt;Bananas&lt;/li&gt;
        &lt;li&gt;Oranges&lt;/li&gt;
    &lt;/ul&gt;

but this is a little strange and will not validate anyway.

It&#39;s easy to see the semantical problems when trying to style my list headers, where I end up needing to put my `&lt;h3&gt;` tags within the first `&lt;li&gt;` and target them for styling with something like:

&lt;!-- language: lang-css --&gt;

    ul li:first-of-type {
        list-style: none;
        margin-left: -1em;
        /*some other header styles*/
    }

horrors! But at least this way I can control the entire `&lt;ul&gt;`, heading and all, by styling the `ul` tag.

What is the correct way to do this? Any ideas?


How to semantically add heading to a list

I have a ordered list where I would like the initial number to be 6. I found that this was [supported][1] (now deprecated) in HTML 4.01. In this specification they say that you can specify the starting integer by using CSS. (instead of the `start` attribute)

How would you specify the starting number with CSS?


  [1]: http://www.w3schools.com/TAGS/tag_ol.asp

Is it possible to specify a starting number for an ordered list?

Now that we have a dedicated `&lt;nav&gt;` tag, 

Is this:

    &lt;nav&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href=&quot;#foo&quot;&gt;foo&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;

any better than the following?

    &lt;nav&gt;
      &lt;a href=&quot;#foo&quot;&gt;foo&lt;/a&gt;
      &lt;a href=&quot;#bar&quot;&gt;bar&lt;/a&gt;
      &lt;a href=&quot;#baz&quot;&gt;baz&lt;/a&gt;
    &lt;/nav&gt;

Assuming that I don&#39;t need an extra DOM level for some CSS positioning/padding, what is the preferred way, and why?

Should I use &lt;ul&gt;s and &lt;li&gt;s inside my &lt;nav&gt;s?

I&#39;m not sure why I need to use ul-li vs simply using divs when listing items. I can make both look exactly the same so where is the functional advantage to creating an unordered list vs lining up divs?



Why should I use &#39;li&#39; instead of &#39;div&#39;?

The W3 docs have a [nested list example][1] prefixed by `DEPRECATED EXAMPLE:`, but they never corrected it with a non-deprecated example, nor explained exactly what is wrong with the example.

So which of these ways is the correct way to write an HTML list?

**Option 1**: the nested `&lt;ul&gt;` is a child of the parent `&lt;ul&gt;`

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:&lt;/li&gt;
        &lt;ul&gt;
            &lt;li&gt;Subitem 1&lt;/li&gt;
            &lt;li&gt;Subitem 2&lt;/li&gt;
        &lt;/ul&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;

**Option 2**: the nested `&lt;ul&gt;` is a child of the `&lt;li&gt;` it belongs in

    &lt;ul&gt;
        &lt;li&gt;List item one&lt;/li&gt;
        &lt;li&gt;List item two with subitems:
            &lt;ul&gt;
                &lt;li&gt;Subitem 1&lt;/li&gt;
                &lt;li&gt;Subitem 2&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li&gt;Final list item&lt;/li&gt;
    &lt;/ul&gt;


  [1]: http://www.w3.org/TR/html401/struct/lists.html#h-10.2

Proper way to make HTML nested list?

How can I make my list items appear horizontally in a row using CSS?

&lt;!-- begin snippet: js hide: false --&gt;

&lt;!-- language: lang-css --&gt;

    #div_top_hypers {
        background-color:#eeeeee;
        display:inline;      
    }
    #ul_top_hypers {
        display: inline;
    }

&lt;!-- language: lang-html --&gt;

    &lt;div id=&quot;div_top_hypers&quot;&gt;
        &lt;ul id=&quot;ul_top_hypers&quot;&gt;
            &lt;li&gt;&amp;#8227; &lt;a href=&quot;&quot; class=&quot;a_top_hypers&quot;&gt; Inbox&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&amp;#8227; &lt;a href=&quot;&quot; class=&quot;a_top_hypers&quot;&gt; Compose&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&amp;#8227; &lt;a href=&quot;&quot; class=&quot;a_top_hypers&quot;&gt; Reports&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&amp;#8227; &lt;a href=&quot;&quot; class=&quot;a_top_hypers&quot;&gt; Preferences&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&amp;#8227; &lt;a href=&quot;&quot; class=&quot;a_top_hypers&quot;&gt; logout&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;

&lt;!-- end snippet --&gt;



How to make a &lt;ul&gt; display in a horizontal row

I need to use, for example, the star-symbol(★) as the bullet for a list-item.

I have read the [CSS3 module: Lists][1], that describes, how to use custom text as bullets, but it&#39;s not working for me. I think, the browsers simply don&#39;t support the `::marker` pseudo element.

How can I do it, without using images?


  [1]: http://www.w3.org/TR/css3-lists/#markers


Unicode character as bullet for list-item in CSS

How can I left-align the numbers in an ordered list?

    1.  an item
    // skip some items for brevity 
    9.  another item
    10. notice the 1 is under the 9, and the item contents also line up

Change the character after the number in an ordered list?

    1) an item

Also is there a CSS solution to change from numbers to alphabetic/roman lists instead of using the type attribute on the ol element.

I am mostly interested in answers that work on Firefox 3.

How can you customize the numbers in an ordered list?

Imagine a simple unsorted list with some `&lt;li&gt;` items. Now, I have defined the bullets to be square shaped via ` list-style:square;` However, if I set the color of the `&lt;li&gt;` items with `color: #F00;` then *everything* becomes red!

While I only want to set the color of the square bullets. Is there an **elegant way** to define the color of the bullets in CSS...

# *...without using any sprite images nor span tags!*

**HTML**

    &lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;ul&gt;

**CSS**

    li{
       list-style:square;
    }

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

I use nested counters and scope to create an ordered list:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    ol {
        counter-reset: item;
        padding-left: 10px;
    }
    li {
        display: block
    }
    li:before {
        content: counters(item, &quot;.&quot;) &quot; &quot;;
        counter-increment: item
    }

&lt;!-- language: lang-html --&gt;

    &lt;ol&gt;
        &lt;li&gt;one&lt;/li&gt;
        &lt;li&gt;two&lt;/li&gt;
        &lt;ol&gt;
            &lt;li&gt;two.one&lt;/li&gt;
            &lt;li&gt;two.two&lt;/li&gt;
            &lt;li&gt;two.three&lt;/li&gt;
        &lt;/ol&gt;
        &lt;li&gt;three&lt;/li&gt;
        &lt;ol&gt;
            &lt;li&gt;three.one&lt;/li&gt;
            &lt;li&gt;three.two&lt;/li&gt;
            &lt;ol&gt;
                &lt;li&gt;three.two.one&lt;/li&gt;
                &lt;li&gt;three.two.two&lt;/li&gt;
            &lt;/ol&gt;
        &lt;/ol&gt;
        &lt;li&gt;four&lt;/li&gt;
    &lt;/ol&gt;


&lt;!-- end snippet --&gt;


I expect the following outcome:

    1. one
    2. two
      2.1. two.one
      2.2. two.two
      2.3. two.three
    3. three
      3.1 three.one
      3.2 three.two
        3.2.1 three.two.one
        3.2.2 three.two.two
    4. four

Instead, this is what I see **(wrong numbering)**:

&lt;!-- language: lang-html --&gt;

    1. one
    2. two
      2.1. two.one
      2.2. two.two
      2.3. two.three
    2.4 three &lt;!-- this is where it goes wrong, when going back to the parent --&gt;
      2.1 three.one
      2.2 three.two
        2.2.1 three.two.one
        2.2.2 three.two.two
    2.3 four

I have no clue, does anyone see where it goes wrong?


Here is a JSFiddle: http://jsfiddle.net/qGCUk/2/

Html ordered list 1.1, 1.2 (Nested counters and scope) not working

I&#39;m trying to style the numbers in a ordered list, I&#39;d like to add background-color, border-radius and color so they match the design I&#39;m working from:

![enter image description here][1]


  [1]: http://i.stack.imgur.com/2N1g0.png

I guess it&#39;s not possible and I&#39;ll have to use different images for each number i.e.

    ol li:first-child {list-style-image:url(&#39;1.gif&#39;)};
    ol li:nth-child(2) {list-style-image:url(&#39;2.gif&#39;);} 
    etc...

Is there a simpler solution?

Can you style ordered list numbers?

What is the proper way to provide a **semantic** caption for an HTML list? For example, the following list has a &quot;title&quot;/&quot;caption&quot;.
   
**Fruit**

 - Apple 
 - Pear
 - Orange

How should the word &quot;fruit&quot; be handled, in a such way that it is semantically associated with the list itself?

How to semantically provide a caption, title or label for a list in HTML

On my website I use reset.css. It adds exactly this to list styles:

    ol, ul {
        list-style: none outside none;
    }
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
        background: none repeat scroll 0 0 transparent;
        border: 0 none;
        font-size: 100%;
        margin: 0;
        outline: 0 none;
        padding: 0;
        vertical-align: baseline;
    }

The problem is that all list styles are set to `NONE` with this. I want to revert back original list styles (default) for all lists on website sub-pages only (all lists in `.my_container`).

When I try settings things like `list-style-type` to `inherit` is doesn&#39;t inherit the browser&#39;s default styles just for this CSS property.

**Is there any way to inherit the original browser&#39;s styles for certain properties without modifying reset.css?**

What is default list styling (CSS)?

In Python, what is the best way to create a new list whose items are the same as those of some other list, but in reverse order? (I don&#39;t want to modify the existing list in place.)

Here is one solution that has occurred to me:

    new_list = list(reversed(old_list))

It&#39;s also possible to duplicate `old_list` then reverse the duplicate in place:

    new_list = list(old_list) # or `new_list = old_list[:]`
    new_list.reverse()

Is there a better option that I&#39;ve overlooked? If not, is there a compelling reason (such as efficiency) to use one of the above approaches over the other?

Best way to create a &quot;reversed&quot; list in Python?

How can I center an unordered list of `&lt;li&gt;` into a fixed-width `div`?

&lt;!-- begin snippet: js hide: false console: false babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;table width=&quot;100%&quot;&gt;
      &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td width=&quot;41%&quot;&gt;&lt;img src=&quot;/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg&quot; width=&quot;400&quot; height=&quot;424&quot;&gt;&lt;/td&gt;
        &lt;td width=&quot;59%&quot;&gt;&lt;p align=&quot;left&quot;&gt;&amp;nbsp;&lt;/p&gt;
          &lt;h1 align=&quot;left&quot;&gt;StudioTeknik.com&lt;/h1&gt;
          &lt;p&gt;&lt;br align=&quot;left&quot;&gt;
            &lt;strong&gt;Marc-Andr&#233; M&#233;nard&lt;/strong&gt;&lt;/p&gt;
          &lt;ul&gt;
            &lt;li&gt;Photographie digitale&lt;/li&gt;
            &lt;li&gt;Infographie &lt;/li&gt;
            &lt;li&gt;D&#233;bug et IT (MAC et PC)&lt;/li&gt;
            &lt;li&gt; Retouche &lt;/li&gt;
            &lt;li&gt;Site internet&lt;/li&gt;
            &lt;li&gt;Graphisme&lt;/li&gt;
          &lt;/ul&gt;
          &lt;p align=&quot;left&quot;&gt;&lt;span class=&quot;style1&quot;&gt;&lt;strong&gt;Cellulaire en suisse : &lt;/strong&gt;&lt;/span&gt;&lt;a href=&quot;#&quot;&gt;+41 079 573 48 99&lt;/a&gt;&lt;/p&gt;
          &lt;p align=&quot;left&quot;&gt;&lt;strong class=&quot;style1&quot;&gt;Skype : &lt;/strong&gt; &lt;a href=&quot;#&quot;&gt;menardmam&lt;/a&gt;&lt;/p&gt;
        &lt;p align=&quot;left&quot;&gt;&lt;strong class=&quot;style1&quot;&gt;Courriel :&lt;/strong&gt;&lt;a href=&quot;https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com&quot;&gt;    info@studioteknik.com&lt;/a&gt;&lt;/p&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;

&lt;!-- end snippet --&gt;






How can I center &lt;ul&gt; &lt;li&gt; into a div?

All I want is to be able to change the color of a bullet in a list to a light gray. It defaults to black, and I can&#39;t figure out how to change it.

I know I could just use an image; I&#39;d rather not do that if I can help it.

Change the color of a bullet in a html list?

I have the following markup,

    &lt;ul id=&quot;menu&quot;&gt;              
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Something4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;


The `&lt;li&gt;` is a bit big, with a small image on its left,
I have to actually click on the `&lt;a&gt;` to activate the link. 
How can I make a click on the `&lt;li&gt;` activate the link?

Edit1:

    ul#menu li
    {
        display:block;
        list-style: none;
        background: #e8eef4 url(images/arrow.png) 2% 50% no-repeat;
        border: 1px solid #b2b2b2;
        padding: 0;
        margin-top: 5px;
    }

    ul#menu li a
    {
    
        font-weight: bold;
        text-decoration: none;
        line-height: 2.8em;
        padding-right:.5em;
        color: #696969;
    }

How to make the HTML link activated by clicking on the &lt;li&gt;?

I am wondering if there is some way to change a CSS attribute for the last `li` in a list using CSS.  I have looked into using `:last-child`, but this seems really buggy and I can&#39;t get it to work for me.  I will use JavaScript to do this if necessary, but I want to know if anyone can think up a solution in CSS.

Changing CSS for last &lt;li&gt;

Is there any CSS selector to attach some style to the numerical part of an ordered list only?

I have HTML like:

    &lt;ol&gt;
       &lt;li&gt;a&lt;/li&gt;
       &lt;li&gt;b&lt;/li&gt;
       &lt;li&gt;c&lt;/li&gt;
    &lt;/ol&gt;

Which should output:

```lang-none
1.a
2.b
3.c
```

I need to make 1., 2. and 3. **bold**, while leaving a, b, and c regular.

I am aware of the `&lt;span&gt;` workaround...




Is there a way to make numbers in an ordered list bold?

Why is the following code valid when I am using a `&lt;div&gt;` inside a `&lt;li&gt;`?

    &lt;ul&gt;
        &lt;li class=&quot;aschild&quot;&gt;
            &lt;div class=&quot;nav&quot;&gt;Test&lt;/div&gt;
        &lt;/li&gt;
    &lt;/ul&gt;

Can I use a div inside a list item?

When I try to center a `&lt;ul&gt;` the text in the `&lt;li&gt;` centers but the bullet points stay on the far left of the page. Is there any way to get the bullet points to stay with the text when it is centered?

    #abc{text-align: center; }

    &lt;div id=&quot;section1&quot;&gt;
    &lt;div id=&quot;abc&quot;&gt;
    &lt;ul&gt;
    &lt;li&gt;one&lt;/li&gt;
    &lt;li&gt;two&lt;/li&gt;
    &lt;li&gt;three&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div/&gt;
    &lt;div/&gt;

how do I get the bullet points of a &lt;ul&gt; to center with the text?

I am doing some unit tests and I want to know if there&#39;s any way to test if a list is ordered by a property of the objects it contains.

Right now I am doing it this way but I don&#39;t like it, I want a better way. Can somebody help me please?
    
    // (fill the list)
    List&lt;StudyFeedItem&gt; studyFeeds = 
        Feeds.GetStudyFeeds(2120, DateTime.Today.AddDays(-200), 20);   
    
    StudyFeedItem previous = studyFeeds.First();
            
    foreach (StudyFeedItem item in studyFeeds)
    {
        if (item != previous)
        {
            Assert.IsTrue(previous.Date &gt; item.Date);
        }

        previous = item;
    }

 


How to check if a list is ordered?

How can I reduce default gap between bullet and text in an `&lt;li&gt;`?

* Item 1
* Item 2
* Item 3

I want to reduce gap between the bullet and &quot;I&quot;.

Reducing the gap between a bullet and text in a list item

I have the following HTML:

    &lt;ul&gt;
      &lt;li&gt;A
        &lt;ul&gt;
          &lt;li&gt;subsection&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;B
        &lt;ul&gt;
          &lt;li&gt;subsection&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;C
        &lt;ul&gt;
          &lt;li&gt;subsection&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;


With jQuery, how do I target the FIRST level of `&lt;li&gt;`s?

For example, I need to make the font bold on hover to the `&lt;li&gt;`s with the letters A, B and C, but NOT have that font style applied to the nested `&lt;li&gt;`s (with the name *subsections*).

Here&#39;s an initial jsfiddle [**DEMO**][1] if you&#39;d like to use it.

Thanks.

**EDIT--**

**Solution:**

**CHILD SELECTORS**, that&#39;s the answer.

No need for jQuery, this can be done using CSS.

Here&#39;s the updated [**DEMO**][2]

**EDIT--** Here&#39;s a **[more clear demo][3]**

Thanks,


  [1]: http://jsfiddle.net/aNcsD/
  [2]: http://jsfiddle.net/aNcsD/1/
  [3]: http://jsfiddle.net/aNcsD/166/

Target first level &lt;li&gt;s and not the nested &lt;li&gt;s

Pretty simple question, but I am not sure if it is possible.  I want to add an image to act as a bullet in all `&lt;h1&gt;` elements.  I know I can achieve this by:

    &lt;span class=&#39;bullet&#39;&gt;&lt;/span&gt;&lt;h1&gt;My H1 text here&lt;/h1&gt;

with css:

    .bullet{
        background: url(&#39;bullet.png&#39;) no-repeat;
        display:inline-block;
	    vertical-align: middle;
	    background-size:100%;
	    height:25px;
	    width:25px;
	    margin-right: 5px;
    }

but is there an automatic way to do the same thing?  I was thinking something like:

    h1{
        list-style-image: url(&#39;bullet.png&#39;);
    }

but that only seems to work with `&lt;ul&gt;` elements.  I really don&#39;t want to have to paste the `&lt;span&gt;` element everywhere before the `&lt;h1&gt;` element.  Any ideas?

Can I use CSS to add a bullet point to any element?

    &lt;ol&gt;
       &lt;li&gt;test&lt;/li&gt;
       &lt;li&gt;test&lt;/li&gt;
    &lt;/ol&gt;

will show as:
&lt;ol&gt;
       &lt;li&gt;test&lt;/li&gt;
       &lt;li&gt;test&lt;/li&gt;
&lt;/ol&gt;

I want to have numbers coloured and text black!

I can edit the css, but I do not have access to the HTML.


&lt;ol&gt; with numbers another color

I&#39;m trying to see my markdown nested list items rendered with corresponding indentation when viewed in a browser live from the Bitbucket pages. But I can&#39;t figure out how it works even when using [their examples][1] ([updated][fix-docs]):

    * Item 1
    * Item 2
    * Item 3
      * Item 3a
      * Item 3b
      * Item 3c

It ignores indentation for items 3a-c:

[![bitbucket rendered list][2]][2]

I want it to look like this (syntax works perfectly fine on SE and Github):

[![SE rendered list][3]][3]

Their [list in list][4] example is particularly unacceptable:

    1. Step 1
    2. Step 2
    3. Step 3
       * Item 3a
       * Item 3b
       * Item 3c

[![list in list on bb][5]][5]

Here&#39;s [a repo][6] I set up just for this.


  [1]:https://confluence.atlassian.com/bitbucketserver/markdown-syntax-guide-776639995.html#Markdownsyntaxguide-Unorderedlist
  [2]: http://i.stack.imgur.com/Wm0y2.png
  [3]: http://i.stack.imgur.com/0aTut.png
  [4]:https://confluence.atlassian.com/bitbucketserver/markdown-syntax-guide-776639995.html#Markdownsyntaxguide-Listinlist
  [5]: http://i.stack.imgur.com/Af1to.png
  [6]:https://bitbucket.org/jeffpuckett/markdown-lists
  [fix-docs]:https://community.atlassian.com/t5/Answers-Developer-Questions/list-in-list-will-only-work-with-4-spaces-please-update-guide/qaq-p/519444

How to markdown nested list items in Bitbucket?

This is a WordPress site, the classes/ID&#39;s are generated, I can&#39;t just go in and add a class.

Yes, I have firebug... but I&#39;m so twisted around and confused as to whether this is coming from BuddyPress or.... that I&#39;m just asking for help on finding the id or class that I&#39;d say list-style-type: none;

I need to have ULs with bullets working in the general contact area, but not in the sidebar or on the group categories.  http://ratest4.com/art-categories/


Here is the code I want the bullet removed from (Gallery Hours h3):

    &lt;div id=&quot;primary&quot; class=&quot;widget-area&quot; role=&quot;complementary&quot;&gt;
    &lt;ul class=&quot;xoxo&quot;&gt;
    &lt;li id=&quot;text-3&quot; class=&quot;widget-container widget_text&quot;&gt;&lt;h3 class=&quot;widget-title&quot;&gt;Gallery Hours&lt;/h3&gt;

And here is CSS that came with the style sheet, that did work PRE Buddypress

    .widget-area ul {
    list-style: none;
    margin-left: 0;}

So... why isn&#39;t that working?


Also for the sidebar widget titles / h3s I have this but it too is not obeying:

    .widget-title {
    background:#555555;
    color: #fff;
    font-weight: bold;
     }

While these bullets in the sidebar were not there pre-BuddyPress install (in standard WordPress, they are now.


How do I hide the bullets on my list for the sidebar?

I have an html Ordered list with type set to &quot;A&quot;

    &lt;ol type=&quot;A&quot;&gt;...&lt;/ol&gt;

Thus, each list item will start with A, B, C, etc.

I would like to style the A, B, C letters to be bold. I have tried setting font-weight:bold; via css, but it didn&#39;t work. Any suggestions on how to do this?

Make ABC Ordered List Items Have Bold Style

I think the answer to this question is no... but does anyone know of a an HTML/CSS way to create an ordered list without a period after the numbers? Or, alternatively, to specify the separator character?

Ideally I don&#39;t want to do list-style-image with a different class for each number, but that&#39;s all I&#39;ve been able to think of so far... That seems terribly unsemantic.

IE:

    Default Style:
    1. ______
    2. ______
    3. ______

    Desired Style:
    1  ______
    2  ______
    3  ______

    Alternate Style:
    1) ______
    2) ______
    3) ______



All Html Lists Solutions on Gang of Coders

Total of 48 Html Lists Solutions