2

scss を使用して Foundation 6 トップ バーのパディングを使用して、アンカー タグのクリック可能な領域を増やそうとしています。Foundation 6 では、何らかの理由でこれが許可されていないようです。display プロパティを inline-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>
4

2 に答える 2

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>
于 2015-12-27T07:42:40.553 に答える
0

に「幅: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>

于 2015-12-27T07:14:41.597 に答える