Treehouse: Grow your CSS skills. Land your dream job.

Clickable li’s with different number of text lines inside

  • # January 18, 2013 at 6:25 am


    I’m trying to render clickable li’s but independent from the content that there is inside of the li. For example the code below has one button with just one line and another one with four lines:

    background: red;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    float: left;

    li {
    padding: 10px; display: inline-block;
    border-left: 1px solid white;
    width: 100px;
    text-align: center;
    vertical-align: middle;
    li:first-child {border-left: none;}

    a {


    Here is the [jsfiddle](

    # January 18, 2013 at 6:33 am

    Are you saying you want 4 buttons inside the second LI? I’m a bit confused about what you’re looking to achieve?

    # January 18, 2013 at 6:44 am

    Me too…surely that’s the same as submenu (effectively):

    Or did you mean that each item would not be a link?:

    # January 18, 2013 at 11:29 am

    @Pauline_D im talking about the second option you mention. As you can see in that example the li area of the first item is not all clickable entire. I would like it was clickable entire.

    # January 18, 2013 at 1:33 pm

    OK…that’s doable:

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.