带有填充的HTML列表，试图弄清楚包装

Question

So I'm having trouble with a link section. I've got big blocks for links. When the viewport is wider, they all line up next to each other. But I've got a tiny bit of responsive space where I want the block that says MOBOT to knock down onto a new line.

http://www.contrib.andrew.cmu.edu/~sc0v/secret/images/current.png

My goal is that the MOBOT square clears the first line of squares completely. So like the link below Apologies for the hack together illustrator screenshot.

http://www.contrib.andrew.cmu.edu/~sc0v/secret/images/ideal.png

My html:

    <h4 class="sub-head-top">Quick Links</h2>
    <ul class="traditions"> 
        <a href="#booth"><li class="quicklink">Booth</li></a>
        <a href="#buggy"><li class="quicklink">Buggy</li></a>
        <a class="last" href="#mobot"><li class="quicklink">Mobot</li></a>
    </ul>

My css:

    ul.traditions {
        padding-top:12px;
        padding-bottom:10px;
    }

    ul.traditions li {
        display: inline;
        list-style:none;
         }

    ul.traditions li.quicklink   {
        background-color:#37BEEC;
        font-family:'Montserrat', Arial, Helvetica;
        text-transform:uppercase;
        font-size:.8em;
        letter-spacing:.1em;
        color:white;
        font-weight:bold;
        padding:15px 18px;
        text-decoration: none;
    }

    ul.traditions a   {
        color:white;
        text-decoration: none;
        margin:0px 13px 0px 0;
    }

    ul.traditions a.last   {
        margin:0 0px 0px 0;
    }

Any thoughts on where I should put padding/margins or something else that is wrong with my code? I'm a designer by trade, so my coding knowledge is hacked together, just let me know if it's off!

Thanks!! :)

Answer 1

Syntax error - You can not have an elemnt within an <ul> unless it is wrapped in a <li> . You have <a> wrapping <li> this is not correct. Also you have a <h4> opening tag and a <h2> closing tag.

DEMO http://jsfiddle.net/x8dSP/2624/

<h4 class="sub-head-top">Quick Links</h4>
    <ul class="traditions"> 
       <li class="quicklink"><a href="#booth">Booth</a></li>
        <li class="quicklink"><a href="#booth">Booth</a></li>
        <li class="quicklink last"><a href="#booth">Booth</a></li>
    </ul>

Answer 2

Change your ul.traditions li CSS to the following:

CSS

ul.traditions li {
    display: inline-block;
    list-style:none;
    margin-bottom: 15px;
}

You want to set the li elements as inline-block and set the bottom margin to normalize the spacing.