How to Add List-Style-Type: "Disc" to <P> Tag

Adding list-styles to p tag

The reason this "didn't work" is because the default list-style-position is outside of the element(s) to which the list-style-type counter is applied; which means it's, by definition, outside of the left margin of the element. Therefore if you specify a margin-left (of a sufficiently-large number) it works perfectly:

p {
    text-indent:2em;
    list-style-type:disc;
    display:list-item;
    margin-left: 2em;
}

JS Fiddle demo.

Alternatively, if you specify list-style-position: inside it also works:

p {
    text-indent:2em;
    list-style-type:disc;
    display:list-item;
    list-style-position: inside;
}

JS Fiddle demo.

Css: How to apply the same list-style-type bullets for html sub-lists?

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

<ul class="ul-ident">         <li>            <p>test1:</p>            <ul class="ul-ident">               <li>                  <p>subtest1</p>               </li>               <li>                  <p>subtest2</p>               </li>               <li>                  <p>subtest3</p>               </li>               <li>                  <p>subtest4</p>               </li>            </ul>         </li>         <li>            <p>test2</p>         </li>         <li>            <p>test3</p>         </li>         <li>            <p>test4</p>         </li>         <li>            <p>test5</p>         </li>      </ul>      <p>option 2 - </p>      <ul class="ul-ident">         <li>            <p>test1</p>         </li>         <li>            <p>test2</p>         </li>      </ul>

It is possible to give list-style-type for some elements of li and for others dont?

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

<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 to whatever depth you want. Then apply the CSS style as desired to the list.

html css list with 'p' tag issue

This is caused by the div, which is a block, so it wants to start on a new line after the inline a, even if the a is empty (and would have been ignored by older versions).

Solution: turn the div into an inline block, so that it sits in the same line as the a, to the right of it. In other words, add this to your CSS:

ul a + div {display:inline-block}

See http://jsfiddle.net/MrLister/6RPsN/

Edit: or if some of your a elements do have content and do need to sit on a line of their own above the div that follows, add :empty to the CSS, so that it works only on as without content.

ul a:empty + div {display:inline-block}

I'm not sure if this works in the versions of IE that it should work in though; can't test all of them here.

Increase size of list-style-bullet type

Might not work in old version of IE.

li:before{ content:'\00b7'; font-size:100px; }

Demo

For IE6:

Without javascript or images, I would recommend putting a <span>·</span> in the beginning of every list item and styling that.

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

While you can use a :before pseudo-selector to add a "-" or "•" character in front of your element, it doesn't really make your element behave like a bullet point. Your element may look like a bullet point, but that's just a dirty hack, really, and should be avoided!

To make your element both (1) look like a bullet point and (2) behave like a bullet point, you should set the display of that element to list-item. Optionally, you can also set list-style-type (default : disc) and list-style-position (default : outside) attributes to modify the behavior / look-and-feel of your list item.

If your element spans multiple lines, list-style-position should be the default value outside if you want all of your lines to align to the right of your bullet point. In that case, however, it is possible you don't see your actual bullet point, as it would be to the left of the content of your element. If this happens, you can just add a left margin to move the element's content to the right, and your bullet point should show up.

EXAMPLE 1

h1 {
    display: list-item; /* This has to be "list-item"                                          */
    margin-left : 1em;  /* If you use default list-style-position 'outside', you may need this */
}

<h1>
  Your H1 text should go here. If it consists of multiple
  lines, the left alignment of all lines is the same.
</h1>
<h1>
  Here's another item.
</h1>

How to control size of list-style-type disc in CSS?

I have always had good luck with using background images instead of trusting all browsers to interpret the bullet in exactly the same way. This would also give you tight control over the size of the bullet.

.moreLinks li {
    background: url("bullet.gif") no-repeat left 5px;
    padding-left: 1em;
}

Also, you may want to move your DIV outside of the UL. It's invalid markup as you have it now. You can use a list header LH if you must have it inside the list.

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;

Disc to left of list item is displayed at bottom

It appears that the width CSS property triggers hasLayout for the li element in IE7. First try removing the width:100%; declaration to make sure the bullet appears in the correct place. If you can't do without the width property, you can use position: relative; and vertical-align: top; to move the bullet back into place, as outlined at http://www.gunlaug.no/tos/moa_26.html.

Note that the code on that page uses hacks to target IE6 and IE7. I recommend using conditional comments instead, like so:

<!--[if IE 7]>
  <style type="text/css" media="screen">
    /* IE7-specific CSS here */
  </style>
<![endif]-->