Question

当鼠标悬停在列表项上时，请参阅小提琴（https://jsfiddle.net/22upj1yc/），我希望黑色高亮显示不覆盖列表项的整个区域，而不是在顶部或底部留下任何空白区域。现在它只覆盖列表项的中心区域。

我已经尝试从ul中删除填充并向li添加高度，但它不起作用。我该怎么做？

ul {
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
  height: 50px;
}

Answer 1

将悬停添加到<li>而不是<a>标记，请参阅小提琴https://jsfiddle.net/22upj1yc/1/

ul li:hover {
  background-color: black;
}

Answer 2

我基本上已更新了您的项目，请查看此jsfiddle。

而不只是ul { }，我已将其设为ul li { }。

CODE

body {
  font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif;
  background: #f5f5f5;
}

ul li {
  display: inline-block;
  list-style: none;
  padding: 10px;
  margin: auto;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
}

ul li a {
  color: #777;
  text-decoration: none;
  padding: 0 12px;
}

ul li:hover {
  background-color: black;
}

ul li.next {
  border-right: 0;
}

ul li.next:after {
  content: "\f054";
  font-family: FontAwesome;
  font-size: 12px;
  padding: 0 10px;
}

<ul>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li class="next">
    <a href="#">Next</a>
  </li>
</ul>

Answer 3

从ul

中删除填充顶部和底部

ul {
display: inline-block;
list-style: none;
padding:  0 10px;
margin: 0 auto;
background: #fff;
border-bottom: 2px solid #d8d8d8;
}

并向li

添加填充

ul li {
display: inline-block;
border-right: 1px solid #d8d8d8;
padding:10px 0px;
}

这里是jsfiddle https://jsfiddle.net/22upj1yc/6/

的链接

！ - 抱歉英语不好 - ！

Answer 4

内联块元素在每个元素后添加大约4px空间（通过浏览器更改）。您可以在该元素上使用font-size：0取消此操作，并切换字体大小以直接应用于li或标签。

<强> CSS

body {
  background: #f5f5f5;
  // removed font sizing, replaced in ul li below
}

ul {
  display: inline-block;
  font-size: 0; // get rid of ghost space after inline-blocks
  list-style-type: none;
  background: #fff;
  border-bottom: 2px solid #d8d8d8;
  margin: 0; padding: 0;
}

ul li {
  display: inline-block;
  border-right: 1px solid #d8d8d8;
  text-align: center;
  margin: 0;
  padding: 0px 6px; // added some left/right padding
  font: 15px/1.625em "Helvetica Neue", Helvetica, sans-serif; // moved your font sizing here
}

...我相信还有其他一些填充问题，基本上我将其他所有设置为0。

<强>拨弄

https://jsfiddle.net/Hastig/3ezn15a0/1/

如何使用以下方式突出显示列表项的整个区域：悬停

4 个答案: