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

nicholas maddren
nicholas maddren
12,793 Points
Posted by nicholas maddren
nicholas maddren
12,793 Points

My UL wont line horizontally?

Why isn't my UL not lining up horizontally?

I am using this code:

CSS: body.custom .nav-bottom { display: inline; list-style-type: none; }

HTML: <div> <ul class="nav-bottom"> <li>Home</li> <li>Services</li> <li>About</li> <li>Contact</li> </ul> </div>

The URL is http://www.thornabytyres.com and the list is at the bottom of the page. Thanks

2 Answers

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Nicholas,

The reason it's not working as you expected is because the display property is on the wrong element, it needs to be bound to your li selector.

Donny van Walsem
Donny van Walsem
1,815 Points

You can just use 

.nav-bottom li { display: inline-block; };

If i understand you correctly.

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

I assume your fairly new to styling HTML using CSS so here's a quick overview, CSS is like the styles properties in Photoshop, you can apply unique styles to a layer to create something unique, eloquent and appealing to the eye.

CSS is pretty much the same thing only you can create and re-use the same styles for more than one element by using and repeating selectors, for example the below is a pretty bad way of styling a page.

<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>

#box-1 { background-color: #000; float: left; width: 33.33%; }
#box-2 { background-color: #000; float: left; width: 33.33%; }
#box-3 { background-color: #000; float: left; width: 33.33%; }

For developers still learning this would be something I typically see but it's nothing to be ashamed of as we all did the same thing at one point, the much cleaner and correct way of writing this would be.

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box {
    background-color: #000;
    float: left;
    width: 33.33%;
}

I won't get into anything else mainly because it's a bit far off your original topic but I thought it might help to understand the context behind my original answer.