last item of the <li> list is not down even if you have space

Asked

Viewed 334 times

2

I’m making a very simple site 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 align to the header and such. The problem is that when I set the right size to align with the interface of the site the last item of the list goes down even though there is room for it to be on top...

I’ve tried to do Divs instead of list and the same thing. So I put a white border on the interface so you can see the size of it

1) example: list aligned but only left http://www.emagrecerdireito.com/agency/

2) example: so if I increase the blocks to align right the last one falls down http://www.emagrecerdireito.com/agency2/

Already, in this case I am increasing the size on the left with padding-left(from 11.7% to 12%), but I have tried with width and the same effect and the same problem.

The id that formats the Blocks is the "#interfaceiconesproducts"

html css list
  • 1

    The block is falling because the container size is not holding it. From what I saw in DOM and CSS, the positioning of the <figure id="logo"> is wrong, committing to <figure> internal and thus impacting on the visualization of products.

  • 1

    In addition, the tag <head> is in the wrong place.

  • @Rodrigo Rigotti, I fixed the header*, now it’s going well I didn’t touch the figure. What’s wrong with it?

1 answer

2


Your problem is the whitespace among the li.

How do you have a padding to the right that added with the padding to the left results in 25%, the whitespace increase consumption a little and the sum of the four li which is already 100% with the addition of whitespace exceeds 100% available.

How to solve

You can solve the problem in many ways:

  1. End the whitespace

    Space appears because there is at least one character between li, either tab or line break or other.

    If you have all the HTML code followed you already solve the question:

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

  2. Adjust the CSS settings

    You can adjust your padding-right who is the 13% for 12.333% in order to remove from the li what the whitespace is consuming.

  3. Adjust presentation of elements

    These are defined in li the property display: inline-block; which can technically be replaced by:

    float:left;
display:block;

    The end result is the same, just need to ensure that you clean the float in your ul making use of property clear:both; in order to maintain the flow that you already have in the document.

Browser other questions tagged html css list

You are not signed in. Login or sign up in order to post.