我正在尝试使用 scss 在 Foundation 6 Top Bar 中使用填充来增加 anchor 标记的可点击区域。出于某种原因，Foundation 6 似乎不允许这样做。我已尝试将显示属性设置为内联 block 和 block ，但填充仍然不会影响链接的大小。
您可以增加 li 元素的填充，但这不会增加链接的可点击区域。
如果没有安装 foundation 6 scss 元素，我真的不知道如何测试它，所以我只是直接发布 html 和 css。
这是我添加到 app.scss 文件中的 css
.top-bar a {
display: inline-block;
padding: 40px;
}
.top-bar a:hover {
background: lightblue;
}
这是一些示例 html
<!DOCTYPE html>
<html class="no-js" lang="eng">
<head>
<meta charset="utf-8">
<base href="/">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css"/>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<nav class="top-bar columns">
<ul class="top-bar-left menu ">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</nav>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
最佳答案
这是一个，完全夸大了这一点，你可以把它做成任何大小。
<a href="stuff.html"><div class="container6"><p>1</p></div></a>
和
<style>div.container6 {
height: 10em; background-color:blue; width:10em;
display: flex;
align-items: center;
justify-content: center;
}</style>
关于html - 如何在 Foundation 6 的顶部栏中为 anchor 标签添加填充？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34478050/