Unordered List Won't Align Properly

[misstheresa2009]

Hi,

I have a problem with the unordered lists in my template that’s driving me a little crazy. When I create an unordered list the list heading and contents don’t line up properly. For example, I want the list to look like this:

Static Website Design

    Option 1
    Option 2
    Option 3

But the list heading doesn’t line up with the bullets or content. I’m not sure if this is a WordPress issue or if its the stylesheet. Is there any way you can help me? Does this happen all of the time?

Thanks, misstheresa2009

Topic

[Jason Bobich]

Hello,

This is pretty standard in terms of styling unordered lists in general, but you’re free of course to make whatever stylistic changes you like. You’d simply target the <ul> tags in your CSS and adjust the left margin.

http://www.w3schools.com/css/css_list.asp

http://www.w3schools.com/css/css_margin.asp

For CSS changes, it’s a good idea to use a tool like firebug or Google Chrome’s built-in developer tools to locate them and then put the edits either in your child theme or in the “Custom CSS” option on your theme options page.

Also, here’s a helpful tutorial on how to use Firebug – http://vimeo.com/20917974. The only thing I’d suggest not doing is actually making edits to the theme’s CSS files, as it shows at the end of that video. However, the video serves as a good introduction to Firebug and how it can be used to find what CSS is effecting certain areas of your site without ever digging around in any files.

[Author]

Replies