[Resolved] Problems with css: ul and li

[Ole]

Im having trouble with to much space between list items in ul.

<ul class=”ftul”>
<li class=”ftli”>Item A
<li class=”ftli”>Item B
<li class=”ftli”>Item C
<li class=”ftli”>Item D

My Styles

.ftli{
overflow: hidden;
padding: 0;
margin: 0;
}

.ftul{
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}

I have tried with this style in my style.css in my child theme, but i can’t change the padding between top and bottom of the items?

[Leo]

Hi there,

Where is the list on that page you linked? Thanks!

[Ole]

Hello again

It’s the box down left. But i might have solved the problem. It’s aparently the height property of css, that determine how much vertical space a li takes?

[Leo]

Not sure what you mean? What are you trying to accomplish?

[Ole]

My problem was the items in the list, were displayed with to much space between each item. It was much bigger than the vertical space when just using lines ending with <br />

So i tried changing the space between the list items (li) with css padding, and margin. But that had no effect.
When i instead changed the value of the css height property (li), i could set the wanted space.

So it’s just

.ftli{
  height: 15px;
}

Instead of

.ftli{
  padding: 0;
  margin: 0;
}

In this list:

<ul class=”ftul”>
<li class=”ftli”>Item A
<li class=”ftli”>Item B
<li class=”ftli”>Item C
<li class=”ftli”>Item D
</ul>

[Tom]

Do your list items have closing elements?

<ul>
    <li>Test item</li>
</ul>

If your list is like that, the items shouldn’t have any defined height by default.

[Author]

Posts