Question

我希望在中型和大型设备中占用整个页面宽度的菜单，在较小的设备中，我希望垂直显示菜单项。我使用网格，但我也想在活动列表项下面（位于列表项底部）和悬停时有一个红色边框。但是这个红色边框底部不占据列表项的整个宽度。你知道为什么吗？

HTML：

<div  style="background-color:yellow;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="MenuList">
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

CSS：

ul{
  list-style:none;
}
.MenuList{
  display: flex;
  align-content: center;
  justify-content: space-around;
  li{
    border-left: 1px solid gray;
    padding: 20px 15px 20px 15px;

    a{
      color:#fff;
    }
    &:first-child{
      border-left: 0;
      border-bottom: 5px solid red;
    }
    &:hover{
      border-bottom: 5px solid red;
      cursor: pointer;
    }
  }
}

Answer 1

将flex: 1添加到li，以便占用所有 ul中的可用空间 - 请参阅下面的演示：

ul {
  list-style: none;
}

.MenuList {
  display: flex;
  align-content: center;
  justify-content: space-around;
}

.MenuList li {
  border-left: 1px solid gray;
  padding: 20px 15px 20px 15px;
  flex: 1;
}

.MenuList li a {
  color: #fff;
}

.MenuList li:first-child {
  border-left: 0;
  border-bottom: 5px solid red;
}

.MenuList li:hover {
  border-bottom: 5px solid red;
  cursor: pointer;
}


}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">

<div style="background-color:yellow;">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <ul class="MenuList">
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
          <li><a>Item</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Answer 2

将此添加到您的LI：

     flex: 1 0 auto;

或更简单：flex: 1;

jsFiddle

border-bottom不占用整个宽度

2 个答案: