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 CSS Layout Techniques Display Modes Block vs. Inline Elements

Daniel Gibson
Daniel Gibson
10,603 Points
Posted by Daniel Gibson
Daniel Gibson
10,603 Points

Space between list items?

Great vid, really helpful but I'm getting really frustrated trying to find out how to get the spaces between the li items?. haha

My li items are in a solid block rather than the button type look?... I'v searched everywhere but I still can't solve my problem..

Where am I going wrong?...

https://github.com/ding-uk/responsive-layout

Thanks for your time.

2 Answers

Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi Ding,

I looked closer at the code and the li links are individual blocks similar to how the instruct has displayed in the video. The problem is that you have a background color of green in the .navbar class which is included inside the <ul> tag. This will add a background color across all the <li> elements. If you remove the background color from .nav-bar and add it to the li element in your css then the background color will only be added to each individual <li> tag giving you the appearance of individual buttons.

example below. 

/*remove backgroud from .navbar*/

.nav-bar{
    background: CHARTREUSE; /* remove this style*/
}

/add it to li element/

li {
    list-style-type: none;
        background: CHARTREUSE;

}
Daniel Gibson
Daniel Gibson
10,603 Points
Daniel Gibson
Daniel Gibson
10,603 Points

Ahhhh, you legend...... Thank you, I knew it would be something simple like that....

I did wonder if it had something to do with the colours but I still couldn't work it out. haha

Thank you again, I appreciate you taking the time help!!!

Daniel Gonzalez
Daniel Gonzalez
22,105 Points
Daniel Gonzalez
Daniel Gonzalez
22,105 Points

Hi Ding,

Adding margin or padding to li elements or adding a class with padding and/or marking to li elements will give you spacing between the elements. Specifically top/bottom padding and or margin.

Daniel Gibson
Daniel Gibson
10,603 Points
Daniel Gibson
Daniel Gibson
10,603 Points

Hi, thank you for you reply, i appreciate it...

I have tried that on all my elements which gives me the space between the writing but it doesn't separate the li items into individual blocks?.

On the video, each one of his list items looks like a button whereas mine are within a solid block?.

e.g In the teachers nav bar he has 4 horizontal list items individually separated/divided like buttons. I have 4 horizontal list items spaced inside one solid block?... I'v tried everything but I cant get the li items to be divided like buttons?..

Thank you again...