?
Solved

How to Control List  <LI> position verticle and horizontal

Posted on 2004-08-05
2
Medium Priority
?
1,260 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 2000 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: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say 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

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
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…
Suggested Courses
Course of the Month12 days, 18 hours left to enroll

777 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