SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    ul or ol with no indent

    Hi,

    How do I make <ul> or <ol> with no indent? That is, I don't want the whole list indented at all. I still want text to align left with the bullet.

    Thanks,


    Ben
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  2. #2
    SitePoint Addict
    Join Date
    Jul 2000
    Posts
    201
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try this:
    HTML Code:
    ul, ol {
     margin-left:0px;
    }

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2002
    Location
    Madison, WI
    Posts
    198
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found my answer in another thread: set padding-left to 0px and experiment with margin-left.

    Thanks.

    http://www.sitepoint.com/forums/showthread.php?t=130495
    :::::::::::::::::::::::::::::::::::::::::::::::::::
    Versa Studio
    ExpressionEngine experts
    bas (at) versa studio dot com

  4. #4
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also look into
    Code:
    list-style-position: inside /* our outside */

  5. #5
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by maxor
    Also look into
    Code:
    list-style-position: inside /* our outside */
    If each list item runs more than one line, it tends to bleed into the area set for numbering if you use an inside list style. However, if this is the effect you want then go for it. In most browsers, this has worked for me:
    Code:
    ul, ol {
      padding: 0;
      margin-left: 1em;
    }
    This will make your list numbering flush with any other text elements (paragraphs, etc.) nearby in nearly every browser I've tried it on.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •