Question

我正在尝试使用scss在Foundation 6 Top Bar中使用填充来增加锚标记的可点击区域。基金会6由于某种原因似乎不允许这样做。我已经尝试将display属性设置为inline-block和block，但填充仍然不会影响链接的大小。

您可以增加li元素的填充，但这不会增加链接的可点击区域。

如果没有已经安装的基础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>

Answer 1

这是一个完全夸张的说法，你可以把它做成任何尺寸。

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

Answer 2

添加宽度：100％＆＃39;到

 .top-bar a { 
      display:inline-block; 
      padding: 40px;
      &:hover {
           background: lightblue; 
     } 
   }

修改

试试这个：

＆＃13;
＆＃13;
/*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; } } */
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何在Foundation 6的Top Bar中添加填充到锚标签？

2 个答案: