Question

所以我遇到了链接部分的问题。我有大块的链接。当视口较宽时，它们彼此相邻排列。但是我有一点点响应空间，我想把MOBOT的块打到一个新线上。

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

我的目标是MOBOT广场完全清除第一行方格。所以像下面的链接Apologies一样用于黑客一起插画插图。

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>结束标记。

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

将您的ul.traditions li CSS更改为以下内容：

CSS

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

您希望将li元素设置为inline-block并设置底部边距以标准化间距。

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

2 个答案:

CSS