如何在 Foundation 6 的顶部栏中为锚标签添加填充?
How to add padding to anchor tags in Top Bar in Foundation 6?
我正在尝试使用 scss 在 Foundation 6 顶部栏中使用填充来增加锚标记的可点击区域。出于某种原因,Foundation 6 似乎不允许这样做。我已经尝试将显示 属性 设置为内联块和块,但填充仍然不会影响 link.
的大小
您可以增加 li 元素的填充,但这不会增加 link 的可点击区域。
我真的不知道在没有安装基础 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>
将 'width:100%' 添加到
.top-bar a {
display:inline-block;
padding: 40px;
&:hover {
background: lightblue;
}
}
编辑
试试这个:
/*compiled SCSS*/
.top-bar a {
display: flex;/* NEW */
justify-content: center;/* NEW */
}
.top-bar a:hover {
background: lightblue;
}
/* SCSS
.top-bar a {
display: flex;
justify-content: center;
&:hover {
background: lightblue;
}
}
*/
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.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>
我正在尝试使用 scss 在 Foundation 6 顶部栏中使用填充来增加锚标记的可点击区域。出于某种原因,Foundation 6 似乎不允许这样做。我已经尝试将显示 属性 设置为内联块和块,但填充仍然不会影响 link.
的大小您可以增加 li 元素的填充,但这不会增加 link 的可点击区域。
我真的不知道在没有安装基础 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>
将 'width:100%' 添加到
.top-bar a {
display:inline-block;
padding: 40px;
&:hover {
background: lightblue;
}
}
编辑
试试这个:
/*compiled SCSS*/
.top-bar a {
display: flex;/* NEW */
justify-content: center;/* NEW */
}
.top-bar a:hover {
background: lightblue;
}
/* SCSS
.top-bar a {
display: flex;
justify-content: center;
&:hover {
background: lightblue;
}
}
*/
<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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.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>