Question

我希望在“悬停”的每个列表项的底部都有一个带绿色边框的菜单，并且在列表项中的绿色边框底部且该类处于活动状态。但是我希望每个列表项中的<a>元素是垂直和水平居中的，并且使用：hover效果，<a>元素始终位于中心。

我在此示例中有菜单：https://jsfiddle.net/fyh7o9jj/但边框底部没有出现。你知道问题出在哪里吗？

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li a:hover {
  border-bottom-color: green;
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

Answer 1

将hover添加到li而非a，如下所示：

.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}

请参阅下面的演示和updated jsfiddle：

＆＃13;

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
  padding: 0;
}
.menu li {
  align-items: center;
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  justify-content: center;
  padding: 5px 0;
  background-color: yellow;
}
.menu li a {
  color: green;
  font-size: 16px;
  font-weight: bold;
}
.menu li:hover {
  border-bottom: 1px solid green;
}
.menu li:hover a {
  color: #000;
  cursor: pointer;
  padding-bottom: 0;
  text-decoration: none;
}
.menu .ative {
  border-bottom-color: green;
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

Answer 2

我假设您希望所有黄色区域都可以点击，所以这样做，它会+你的底部边框：

将display: flex添加到a并将其设为灵活容器
将align-items / justify-content从li移至a
将flex-grow: 1添加到a，因此需要全宽
padding li不需要，所以我将其删除了

Fiddle demo

Stack snippet

.menu {
  display: flex;
  width: 100%;
  justify-content: space-between;
  transition: all 200ms ease-out;
}

.menu li {
  border-bottom: 0 solid gray;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 auto;
  height: 59px;
  background-color: yellow;
}

.menu li a {
  flex-grow: 1;                          /*  added, fill width  */
  display: flex;                         /*  added, so text is centered  */
  align-items: center;                   /*  moved, center vert.  */
  justify-content: center;               /*  moved, center hor.  */
  color: green;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid transparent;  /*  added, prevent text move  */
}

.menu li a:hover {
  border-bottom-color: green;
  color: #000;
  cursor: pointer;
  text-decoration: none;
}

.menu .ative {
  border-bottom-color: green;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-container">
  <div class="container">
    <div class="row no-gutters">
      <ul class="menu">
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
        <li><a href="">Item</a></li>
      </ul>
    </div>
  </div>
</div>

悬停列表项下方的边框底部无效

2 个答案: