Solved

How to Control List  <LI> position verticle and horizontal

Posted on 2004-08-05
2
1,255 Views
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>
0
Comment
Question by:894359
[X]
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
2 Comments
 
LVL 3

Expert Comment

by:hyperslug
ID: 11728386
Use CSS:

<style>
      ul { margin: 0px; }
      li { margin-left: -20px; }
</style>
<ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
</ul>
0
 
LVL 31

Accepted Solution

by:
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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">

ul
{
      padding:0;
      margin:0;
      border:1px solid black;
}

li
{
      margin-left:15px;
      padding-left:15px;
}

</style>
</head>
<body>

<ul>
    <li>text</li>
    <li>text</li>
    <li>text</li>
</ul>

</body>
</html>

For more info:
http://www.washington.edu/webinfo/snippets/css/lists.html
http://www.w3schools.com/css/css_list.asp

Thanks,
Sean
0

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