How to remove line spacing and get indent in unordered list

  • 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?

Viewing 6 replies - 1 through 6 (of 6 total)

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

    Thread Starter virtualink

    (@virtualink)

    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”>

    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;
    }

    Thread Starter virtualink

    (@virtualink)

    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.

    Thread Starter virtualink

    (@virtualink)

    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" 

"https://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?

    Thread Starter virtualink

    (@virtualink)

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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to remove line spacing and get indent in unordered list’ is closed to new replies.