How to Control List  <LI> position verticle and horizontal

Posted on 2004-08-05
Last Modified: 2009-02-23
How do you control the horizontal position (spacing) of <li> in a css? I don't like the default spacing, it indents way too much for my taste! Also is there a way to control the verticle spacing from the top and bottom  of the list?? By this I mean the space before and after the <ul> & </ul>
Question by:894359
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Expert Comment

ID: 11728386
Use CSS:

      ul { margin: 0px; }
      li { margin-left: -20px; }
LVL 31

Accepted Solution

seanpowell earned 500 total points
ID: 11728611
Hmmm - that will probably throw the list outside the browser window in IE.

Also, you need both margin and padding on the list item to accomodate Moz browsers, etc.

<style type="text/css">

      border:1px solid black;





For more info:


Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Header Navigation Not Responsive 4 47
How can I make the first part identical to the second ? 1 43
Obsolete font tag need to convert to CSS 3 55
Set css in function 11 54
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question