Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,650 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.

You can just use

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

If i understand you correctly.

Chris Shaw
Chris Shaw
26,650 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.