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 Austin Garrison
Austin Garrison
9,692 Points

Help with an Unordered List

Someone hired me to make them a news site. The only problem I'm having is with this list. I'm having the hottest topics take up a small section at the site of the site. But if a title is too small, it all goes to the next line instead of just breaking. I've tried several things but nothing is working for me.

http://codepen.io/anon/pen/WrjPQo

3 Answers

Abraham Juliot
Abraham Juliot
47,353 Points
Abraham Juliot
Abraham Juliot
47,353 Points

Hi Austin,

I'm not sure if this is what you want to achieve. But, you could give .content a fixed width of 170px rather than 19%. If you use a percentage width, the text will reflow to the width of the container as the screen size changes. Generally, if an element is intended to remain less than 320px, it may be best to use a pixel based width rather than percentage. It depends on what you want to achieve. You could also leave the 19% and just give a parent container or the body element a fixed width, like 900px.

Kuai Cheang
Kuai Cheang
17,931 Points
Kuai Cheang
Kuai Cheang
17,931 Points

Hi, I am not sure what you want. Are you looking for the number to be above the description like these:

<div class="content"> <div class="article" id="news-2"> <ul> <p class="number">1</p> <li> <a href="#"><h3>Virtual Reality Being Placed In Schools</h3></a> </li>

  <p class="number">2</p>
  <li>
    <a href="#"><h3>Enjoy VR Within Your Browser</h3></a>
  </li>

  <p class="number">3</p>
  <li>
    <a href="#"><h3>Pre-Orders Now Available</h3></a>
  </li>

  <p class="number">4</p>
  <li>
    <a href="#"><h3>Selling for $599.99</h3></a>
  </li>

  <p class="number">5</p>
  <li>
      <a href="#"><h3>Another Heading</h3></a>
  </li>
</ul>

</div> </div>

Also, I think you missed a closing <li> tag for the first list, so some of the things didn't display properly. Hope this helps.

Austin Garrison
Austin Garrison
9,692 Points

Fixed the li tag thanks. But I do want the title next to the number, but if the title is longer than the width of the div, it doesnt line break. it just puts the entire title on the next line.

Aaron Loften
Aaron Loften
12,864 Points
Aaron Loften
Aaron Loften
12,864 Points

Hey guy,

I have your answer. :)

Although I do not like using this code, mainly because I had to support older browsers(ie8), but use the following on the list items...

li {
  white-space: nowrap;
}

The nowrap code needs to be placed on the li to group the entire list item as one item not to wrap.

The flaw in this code is that it will not wrap at all when it should eventually. Consider using a media query to compensate for this and also adding a character limit to the list items, since you control the cms(assuming it has one).