Can I specify a list type for some <li> elements, but not for others?

Question

I have a list of answers. And I have within each element of the <li> list an answer number, a paragraph ("test ...") and two links.

And I want to have list-style-type: circle; in my links. But my links do not have <li> elements, they are inside the <li> element.

Do you know if it is possible to do something like this?

I have the code here: http://jsfiddle.net/x9ww2qpd/1/

Answer 1

So just make them <li> elements. For instance:

 <h4>Answer 1</h4> <p> test test test test test test test test test test test test test testtest testtest test test test</p> <span>Saber mais:</span><br/> <ul> <li><a href="#">Who are we?</a></li> <li><a href="#">Who are we?</a></li> </ul> 

You can nest ordered / unordered lists at any desired depth. Then apply the CSS style as desired to the list.

Answer 2

If you use CSS3 pseudo-elements instead of the nested implementation of ul li , you can use :before to create a bullet. It will also give you more control over the visual style and position of the bullet.

 #answers ul li a{padding-left:30px; position:relative;} #answers ul li a:before{content:" "; position:absolute; top:50%; left:24px; border-radius: 100%; background: black; height:4px; width:4px; margin:-4px;} 

FIDDLE DEMO

Answer 3

Without changing the HTML, you can always use the :before pseudo-element with the escaped value content '\2022' . Just change the font-size element accordingly.

Example here

 #answers ul li a:before { content:'\2022'; display: inline-block; padding-right: 10px; } 

Answer 4

If you need or need to do this without changing the HTML markup, set the display property to list-item for the items you want to display as bullet list items and prevent the <br/> tag effect. Example:

 #answers a { display: list-item; } #answers br { display: none; } 

Note that they affect all elements a and br inside the block using id="answers" . It is unclear whether this is required.

The fact is, list-style-type simply sets the style of the marker or other marker, if one is used. This does not produce a marker. Or, in other words, this property affects only those items that have display: list-item .

Better if you can change the markup, just use the <ul> and <li> markup for the elements that you want to display as a bulleted list.

Answer 5

SOLUTION 1

In order for your links to look like (1) as a list item and (2) behave like a list item, you must set the display , list-style-type and list-style-position attributes of that item.

You must also remove the <br /> elements behind the list items.

EXAMPLE CODE:

 * { margin: 0; padding: 0; } #answers{ float:left; width:100%; margin-top:20px; } #answers ul{ list-style:none; } #answers ul li{ margin-bottom:30px; } #answers ul li a{ display: list-item; list-style-position: inside; list-style-type: circle; margin-left:30px; } 

 <div id="answers"> <ul> <li> <h4>Answer 1</h4> <p> test test test test test test test test test test test test test testtest testtest test test test</p> <span>Saber mais:</span><br/> <a href="#">Who are we?</a> <a href="#">Who are we?</a> </li> </ul> </div> 

---

FIDDLE:

http://jsfiddle.net/x9ww2qpd/5/

---

SOLUTION 2

As an alternative to solution 1, you can simply wrap items in list items.

Here you must also remove the <br /> elements behind the list elements and add an extra style to the list in the lists.

EXAMPLE CODE:

 * { margin: 0; padding: 0; } #answers{ float:left; width:100%; margin-top:20px; } #answers ul{ list-style:none; } #answers ul li{ margin-bottom:30px; } #answers ul ul{ list-style:circle; list-style-position: inside; } #answers ul ul li{ margin-bottom:0; margin-left: 30px; } 

 <div id="answers"> <ul> <li> <h4>Answer 1</h4> <p> test test test test test test test test test test test test test testtest testtest test test test</p> <span>Saber mais:</span><br/> <ul> <li><a href="#">Who are we?</a></li> <li><a href="#">Who are we?</a></li> </ul> </li> </ul> </div> 

---

FIDDLE:

http://jsfiddle.net/x9ww2qpd/6/