Changing Bullet Style AND Position in Your Lists

We saw in our last posts how to easily change the bullet style of ordered and unordered lists. You may want to visit those posts.

We can also change the position of the bullet: inside or outside. The default is outside - as illustrated below with this unordered list:

• Here is the default bullet position
  
• Multiple lines will line up neatly underneath each other as shown. (If necessary, narrow your browser window until the line wraps.)
  

But you can specify "inside" and have the bullets indent even more! This can often enhance the presentation of your bullets.

• After creating your list, edit the UL tag to include the code in the next bullet
• <ul style="list-style-position: inside;">
• However, be aware that when using the inside position, any text that wraps will flow underneath the bullet as shown. You may or may not like the way this looks.

This works for numbered lists also, as shown below:

1. <ol style="list-style-position: inside;">
2. But just like an unordered list, lengthy text will flow underneath the bullet as shown. (Narrow your browser window if necessary.)
   

What if you want to change the bullet style and indent the bullet?

• Just type the UL tag exactly as below.
• <ul style="list-style-type: square; list-style-position: inside;">

Of course, the same applies to an ordered list. Here we have changed the bullet to Roman Numeral, and positioned the bullet inside:

1. Just type the OL tag exactly as below.
2. <ol style="list-style-type: upper-roman; list-style-position: inside;">

Bullets are so cool!

►  Check out some of our other posts about styling bullets: How to Change the Bullet Style of your Ordered List and How to Change the Bullet Style of your Unordered List

If this post has been helpful, please consider linking to our blog or sharing!  

Unordered or Ordered Lists: Change Bullet Position

We saw in a previous post how easy it is to change the bullet style of an unordered list. However, to do so you must edit the HTML for your blog post. Don't worry about having to edit the HTML. It's really very easy. We'll show you how below. You may want to visit Changing Bullet Style for Unordered Lists or Changing Bullet Style for Ordered Lists before continuing. Now, let's begin! The two options for the position of the bullet are: inside or outside. The default is outside - as illustrated below:

• Here is the default bullet position

But you can specify "inside" and have the bullets indented! This can often enhance the presentation if your bullets are short.

• After creating your list, edit the UL tag to include the code in the next bullet
• <ul style="list-style-position: inside;">
• However, you might not want to use the inside position if your bullet is a long one because the text flows underneath the bullet as shown.

1. This also works
2. for numbered lists

►  Take a look at some related posts, such as Changing Bullet Style AND Position in Your Lists

If this post has been helpful, please consider linking to our blog or sharing!