WordPress.org

Ready to get started?Download WordPress

Forums

How to remove line spacing and get indent in unordered list (7 posts)

  1. virtualink
    Member
    Posted 6 years ago #

    How might I adjust my css class for an unordered list to remove the line spacing between the li's, and to have the list be indented?

  2. BPartch
    Member
    Posted 6 years ago #

    What do you have now in the .css for your unordered lists? Paste it here or a link to the page would be helpful. :)

  3. virtualink
    Member
    Posted 6 years ago #

    So far, I've only altered "Kubrick" with this

    .postlist li {list-style-type: square;}
    
    which I apply to the ul's
    <ul class="postlist">

  4. BPartch
    Member
    Posted 6 years ago #

    Hello

    add line-height: 1.4em px or whatever adjust until you like it

    `
    .postlist li {
    line-height: 1em;
    list-style-type: square;
    }

    Oh and for the indent add: padding-left: 10px; adjust to your preference.

    .postlist li {
    line-height: 1em;
    list-style-type: square;
    padding-left: 10px;
    }

  5. virtualink
    Member
    Posted 6 years ago #

    Thanks for the input. I've got this in the template rtl.css file and the stylesheet:

    .postlist li {line-height: 1em;
    list-style-type: square;
    padding-left: 10px;}

    the target text from "view source" looks like this:

    <ul class="postlist">
    <li>business/technology alignment,</li>
    <li>the “skills crunch”,</li>
    <li>globalization,</li>
    <li>environmental issues, and</li>
    <li>accelerating competitiveness.</li>
    </ul>

    However, it's only showing the square (so the class is "taking"), but not the indent or line spacing.

  6. virtualink
    Member
    Posted 6 years ago #

    Clarification: First, I figured out that it wasn't line spacing within a bulleted line, it was the line spacing between the bullets.

    So I got some other input, and built this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <style type="text/css">
    .postlist ul {
    list-style-position:outside;
    margin:0;
    padding:0;
    }
    
    .postlist li {
    list-style-type:square;
    margin-left:20px;
    }
    </style>
    </head>
    <body>
    some header
    <ul class="postlist"><li>list item 1</li><li>list item 2</li></ul>
    </body>
    </html>

    It works in a standard web page, though it still doesn't remove the extra line between the "some header" and the first list item.

    AND, the class doesn't work in the WordPress Page...all it provides is square bullet...still much space between bullets, and no indent.

    If I just pop this:

    some header
    <ul class="postlist"><li>list item 1</li><li>list item 2</li></ul>

    into a new page, it looks ok (except for the line at the start of the list) in the editor "visual", but doesn't have the indent or correct spacing between lines in the page view.

    So, should the styles be in rtl.css or style.css or both?

    Any thing special about formatting the styles in these files, or are they just standard css?

  7. virtualink
    Member
    Posted 6 years ago #

    Gave up and inserted >'s...maybe try the bullets again later.

Topic Closed

This topic has been closed to new replies.

About this Topic