Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by William Newell
William Newell
1,482 Points

LIs not aligning properly

Hi

I have a list of 8 Lis in my ul. My ul is nested within a div called .full width. This container is set to width of 100%.

I have given Lis a width of 25% which should give me two rows of four. I have centered Lis but they display two rows of three and last row is two. All are showing a margin.

I have used box-sizing: border-box so padding is included in 25%. I have used A float left which does display the Lis properly but I prefer not to use the float.

Below is my code.

.gallery is my ul

.gallery { background-color: yellow; padding: 0; margin: 0; text-decoration: none; }

.gallery li { background-color: green; width: 25%; height: 200px; display: inline-block; margin: 0; float: left; text-decoration: none;

           }

.gallery li:nth-child(odd) { background-color: grey; } .gallery li:nth-child(even) { background-color: black; }

3 Answers

Nico Julian
Nico Julian
23,657 Points
Nico Julian
Nico Julian
23,657 Points

Hi,

So I tried to reconstruct it as you described, and one thing that I came across that could explain the spacing issue is how the browser deals with inline-block list items.

Although each list item is taking up 25% and has no margin, the browser is counting the whitespace between them. A quick fix for this would be to eliminate the whitespace between each list item's closing tag and the following opening tag.

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<!-- Divs are block level elements, so they already take up 100% width by default -->
  <div class="fullWidth"> 
    <ul class="gallery">
      <li>1</li><li>
       2</li><li>
       3</li><li>
       4</li><li>
       5</li><li>
       6</li><li>
       7</li><li>
       8</li>
    </ul>
  </div>

</body>
</html>

body {
     background-color: #32d58a;
     color: white;
     font-size: 2em;
}

.gallery { 
     background-color: yellow; 
     text-decoration: none; 
     padding: 5px;  /* This will allow the yellow background to be shown around the edges */
     margin: 0; 
}

.gallery li { 
    box-sizing: border-box;  /* This allows the padding to be accounted for in the 25% */
    display: inline-block;
    background-color: green; 
    width: 25%;  /* Each item with take up one quarter of the gallery */
    padding: 20px;  /* This will inset the number by 20px from the top and the right */
    height: 200px; 
}    

.gallery li:nth-child(odd) { 
    background-color: grey; 
} 

.gallery li:nth-child(even) { 
    background-color: black; 
}
William Newell
William Newell
1,482 Points

Thanks Nico

William Newell
William Newell
1,482 Points
William Newell
William Newell
1,482 Points

Hi Patryk,

Thanks for that. It works a treat. I had the Li's running top to bottom. When I ran them Horizontol and added line height it was perfect. It must matter how the Li's Are placed in HTML. Can you confirm this?

Patryk Nowak
Patryk Nowak
14,103 Points

To understand it better, see this article: https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Patryk Nowak
Patryk Nowak
14,103 Points
Patryk Nowak
Patryk Nowak
14,103 Points

Hi William, rather than putting your code as a text, try to put your code on a website such as jsfiddle.com or codepen.io . It will be simpler for reviewer to run through your problem. You can get rid of float: left; The problem with inline-block is there is a whitespace between. More about it here -> https://css-tricks.com/fighting-the-space-between-inline-block-elements/

and last thing -> your UL needs to have line-height: 0, as it takes some default values.

Here is solution: http://codepen.io/anon/pen/pyjpdd

I hope that help you, Patryk

William Newell
William Newell
1,482 Points

Hi Patryk,

Thanks for that. It works a treat. I had the Li's running top to bottom. When I ran them Horizontol and added line height it was perfect. It must matter how the Li's Are placed in HTML. Can you confirm this?