Solved

How to Control List  <LI> position verticle and horizontal

Posted on 2004-08-05
2
1,253 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
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

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Error on link 14 48
webpage layout breaks when expanding bootstrap collapse component 8 26
Changing way home page shows 2 32
Create CSS Animation for Page Transitions 4 26
"I want to put my photos online, but I don't want them stolen.  What settings should I use?" When You Put Photos Online First and foremost, any digital file published on the WWW can be copied, stored, modified, retransmitted, etc.  Remember Naps…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

809 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