last item in list li is not down even though it has space

Question

last item in list li is not down even though it has space

Navigation

#1 by (2 votes)

2

I'm making a very simple website in HTML5 and pure CSS

So I created an inline-block list of 4 items and each item is a large square whose sizes have to line up to the header and such. The problem is that when I set the right size to align with the site interface the last item in the list goes down even though there is still room for it to stay on top ...

I have tried to do with divs instead of list and the same thing. So I put a white border in the interface so you can see the size of it

1) example: list aligned but only left link

2) example: so if I increase the blocks to align the right the last falls down link

In this case, I'm increasing the size on the left with padding-left (from 11.7% to 12%), but I already tried it with width and it has the same effect and the same problem.

The id that formats the Blocks is the "#interfaceicones li products"

html css lista

asked by anonymous 21.10.2014 / 18:17

1 answer

View PDF after AJAX call with TCPDF in Laravel 4 Definition of the "margin-top" in percentage of a "div" works in a strange way

score 2 · Accepted Answer

Your problem is whitespace between li .

As you have a% of right% that added with the left% with% results in 25%, whitespace increases consumption a little and the sum of the padding that is already 100% with the addition of whitespace exceeds 100% available.

How to solve

You can resolve the issue in several ways:

Ending whitespace

The space appears because there is at least one character between padding , whether it's tabbing or line break or others.

If you have the HTML code, you'll solve the question:

<li></li><li></li><li></li><li></li>

Adjusting CSS Settings

You can adjust your li that is li to padding-right to remove from 13% what whitespace is consuming.

Adjust display of elements

These are set in the 12.333% the li property that can technically be replaced by:

float:left;
display:block;

The end result is the same, you just need to make sure that you clear the li on your display: inline-block; by making use of the float property to keep the flow you already have in the document .