带有填充的 HTML 列表，试图找出包装

Question

所以我在链接部分遇到了问题。我有很大的链接 block 。当视口(viewport)变宽时，它们都并排排列。但是我有一点点响应空间，我希望上面写着 MOBOT 的方 block 能够敲下一条新线。

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

我的目标是 MOBOT 方 block 完全清除第一行方 block 。所以喜欢下面的链接 为黑客一起插画截图道歉。

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

我的 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>

我的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;
    }

关于我应该在哪里放置填充/边距或我的代码有其他问题的任何想法？我是一名设计师，所以我的编码知识是拼凑在一起的，如果它关闭了请告诉我!

谢谢!! :)

Answer 1

语法错误 - 您不能在 <ul> 中包含元素除非它被包裹在 <li> 中.你有 <a>包装 <li>这是不正确的。你还有一个 <h4>打开标签和一个 <h2>结束标记。

演示 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>