Question

我尝试制作一个页脚菜单，就像这个网站：pentlandfirth.com/de。当我鼠标悬停在Link上时，它有一个背景，但它位于边框的边缘。我怎样才能在它们之间留出空间？ https://jsfiddle.net/13w3rmat/3/

    #fa{
  width: 600px;
  padding: 20px;
  display: inline-block;
}

#fa ul{
  list-style-type: none;
}

#fa ul li{
  float: left;
  width: 20%;
  margin-right: 2%;
  padding-left: 3%;
  border-right: 1px solid #989;
}

#fa ul li:last-child{
  border: none;
  margin: 0;
}

#fa ul li a{
  text-decoration: none;
  display: block;
  padding-bottom: 10px;
  color: #000;
}

    #fa ul li a:hover{
  color: #f00;
  background: gray;
  border-radius:5px;
  padding-right: 13px

}

              <div id="fa">
  <ul>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
    <li>
      <a href="#">Test</a>
      <a href="#">Test</a>
      <a href="#">Test</a>
    </li>
  </ul>

</div>

Answer 1

这是demo.

在padding标记中添加一点a：

a {
    padding: 10px;
}

但最好是将a提到一个类上面，然后将填充添加到该类中。

Answer 2

只需在padding-bottom: 10px; css中将padding: 5px;更改为#fa ul li a{。

#fa ul li a{
  text-decoration: none;
  display: block;
  padding: 5px; //Here
  color: #000;
}

<强> Working Fiddle

Answer 3

添加margin＆amp; padding代码中的a

#fa{
  width: 600px;
  padding: 20px;
  display: inline-block;
}

#fa ul{
  list-style-type: none;
}

#fa ul li{
  float: left;
  width: 20%;
  margin-right: 2%;
  padding-left: 3%;
  border-right: 1px solid #989;
}

#fa ul li:last-child{
  border: none;
  margin: 0;
}

#fa ul li a{
  text-decoration: none;
  display: block;
  padding: 10px;
  color: #000;
  margin-right:30px;
}

#fa ul li a:hover{
  color: #f00;
  background: gray;
  border-radius:5px;
  padding-right: 13px
}

https://jsfiddle.net/13w3rmat/4/

Answer 4

＆＃13;

#fa ul li a{
  text-decoration: none;
  display: block;
  padding-bottom: 10px;
  padding-left: 10px; /*use padding to the left here */
  color: #000;
}

/* Alternatively
================*/

#fa ul li a:hover{
  color: #f00;
  background: gray;
  border-radius:5px;
  padding-right: 13px; /*this line is missing a semi colon in yours*/
  padding-left: 10px;  /*use padding to the left here*/
}

＆＃13;

如何在它们之间留出空间？

4 个答案: