Question

为了制作标题和列表项之间的距离，我设置了Table A | Date | Time | Count | =============================================== | D1 | T1 | 3 | | D1 | T2 | 1 | | D2 | T1 | 3 | | D2 | T2 | 2 |。奇怪的是，锚点的可点击区域扩展就像我在元素上设置填充，但我没有。是什么情况？

＆＃13;

UPDATE A
SET Count = (SELECT COUNT(Value)
             FROM B, A
             WHERE A.Date = B.Date
                   and A.Time = B.Time)

＆＃13;

<a>

＆＃13;

EDITED ----------

如果我在元素上设置了边距和填充，则可点击区域和距离可以正常工作。

Answer 1

您的a元素设置为display:block，可扩展其可点击的元素，因此它会扩展到整个宽度。我猜你是这样做的，因为a默认为display:inline，vertical margin doesn't work for inline elements。

您可以改为使用display: inline-block，这仍然会显示margin设置。这是一个例子。我已完全删除了ul，并提供了a元素背景颜色，因此我们可以看到发生了什么：

＆＃13;

a {
    background-color:#fe5;
    display: inline-block;
    margin: 8px 0;
}

＆＃13;

<a href="#help-and-information">HELP & INFORMATION</a>

＆＃13;

与display:block;

的原始内容进行比较

＆＃13;

a {
    background-color:#fe5;
    display: block;
    margin: 8px 0;
}

＆＃13;

<a href="#help-and-information">HELP & INFORMATION</a>

＆＃13;

请注意，正如评论所警告的那样，您不应该在a列表中直接使用ul元素 - 这不是有效的，并且可能会产生不需要的结果。

Answer 2

一种方法，尽管将链接移出ul是最容易的。

＆＃13;

ul.footer-nav {
    margin: 0 12px;
}
ul.footer-nav > a {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #000;
    margin: 8px 0;
}
ul.footer-nav li:first-child {
    list-style: none;
}
ul.footer-nav li:first-child a {
    text-decoration: none !important;       
}

＆＃13;

<ul class="footer-nav">
    <li><a href="#help-and-information">HELP & INFORMATION</a></li>
    <li><a href="#help">Help</a></li>
    <li><a href="#track-order">Track Order</a></li>
    <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

＆＃13;

Answer 3

理想情况下，ul只应将子元素设为li。

如果有人希望制作标题，那么还有其他标签，例如h1，h2等。

所以，你应该修改你的代码如下：

＆＃13;

ul.footer-nav {
  margin: 0 12px;
}

h3 {
  text-align: center;
}

h3 > a {
  color: black;
}

＆＃13;

<h3>
  <a href="#help-and-information">HELP & INFORMATION</a>
</h3>
<ul class="footer-nav">
  <li><a href="#help">Help</a></li>
  <li><a href="#track-order">Track Order</a></li>
  <li><a href="#delivery-and-returns">Delivery& Returns</a></li>
</ul>

＆＃13;

在锚点上添加边距后，锚点的可点击区域会变大

3 个答案: