菜单下方的边框底部未占满整个宽度

时间：2018-11-20 20:51:24

标签： html css twitter-bootstrap bootstrap-4

我想要一个包含一些项目的菜单，每个项目都应该在右侧有一个边框，并且应该有一个边框底但要占据整个宽度。问题在于边框底部仅占据容器的宽度，而不是整个宽度。容器类应该是必需的，因为类别文本应仅占据容器的宽度。

另外，当用户将鼠标悬停在每个项目上时，它应该在该项目及其工作下方出现一个边框底部，问题是，当用户将鼠标悬停在每个项目上时，项目文本会稍微移动一点，您知道为什么吗？

您知道如何解决这些问题吗？

存在问题的代码：http://jsfiddle.net/pjgt1q35/

HTML 

<div class="jumbotron p-0 m-0">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-7">
        <h1 class="display-5 font-weight-bold text-dark">Title</h1>
        <p class="lead text-light">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt voluptatum consequatur deserunt vel dicta voluptatibus sit asperiores minus dolore quidem assumenda amet officiis sequi facere harum accusamus, possimus omnis reiciendis.</p>
      </div>

      <div class="col-5">
        <img src="https://via.placeholder.com/490" width="490" height="300">
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="col p-0 m-0">
    <ul class="categories_menu">
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 1</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 2</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 3</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 4</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 5</a>
      </li>
      <li><a data-toggle="modal" id="" data-target="" href="">More
        <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
    </ul>

  </div>
</div>

CSS 

.categories_menu {
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transition: all 100ms ease-out;

  li {
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 5px solid transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 59px;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 0 5px 0;
    border-left: 1px solid red;
    border-bottom: 1px solid red;

    &:first-child {
      border-left: 0;
    }

    &:hover {
      border-bottom: 5px solid red;
      color: #000;
      cursor: pointer;
      text-decoration: none
    }
    a {
      color: #414e5f;
      font-size: 18px;
      font-weight: bold;
    }
    &.active {
      border-bottom: 5px solid red;

    }

  }
}

3 个答案:

答案 0 :(得分：0)

编辑：我在上面看到了您的评论。 您可以创建一个新的div吗？

<div class="bottom-bordered-div">
    ....your entire code starting with the containing container div
</div>

只需给它一个底部边框，它就包裹着容器，因此菜单仍在容器宽度内。

答案 1 :(得分：0)

要制作全宽容器，可以使用container-flex代替container。 在容器内创建一个row，然后将col放在此处。

<div class="container-flex">
<div class="menu-row row">
<div class="col p-0 m-0">
    <ul class="categories_menu">
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 1</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 2</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 3</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 4</a>
      </li>
      <li class="list-item--hidden">
        <a href="javascript:void(0)" name="category" id="">Item 5</a>
      </li>
      <li><a data-toggle="modal" id="" data-target="" href="">More
        <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
    </ul>

  </div>
</div>

并使用以下样式：

.menu-row {
    border-bottom: 1px solid red;
}
.menu-row ul {
    margin-bottom: 0;
}

为避免在移动悬停<li>时出现问题，请使用以下样式：

a {
    color: #414e5f;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 5px solid transparent;
}
&.active {
    border-bottom: 5px solid red;

}


.categories_menu {
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  transition: all 100ms ease-out;
}

li {
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-bottom: 5px solid transparent;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 59px;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 10px 0 5px 0;
    border-left: 1px solid red;
}

    li:first-child {
      border-left: 0;
    }

    li:hover {
      border-bottom: 5px solid red;
      color: #000;
      cursor: pointer;
      text-decoration: none
    }
    a {
      color: #414e5f;
      font-size: 18px;
      font-weight: bold;
      border-bottom: 5px solid transparent;
    }
    &.active {
      border-bottom: 5px solid red;

    }

.menu-row {
  border-bottom: 1px solid red;
}
    
.menu-row ul {
  margin-bottom: 0;
}
    
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>

    <div class="container-flex">
    <div class="menu-row row">
    <div class="col p-0 m-0">
        <ul class="categories_menu">
          <li class="list-item--hidden">
            <a href="javascript:void(0)" name="category" id="">Item 1</a>
          </li>
          <li class="list-item--hidden">
            <a href="javascript:void(0)" name="category" id="">Item 2</a>
          </li>
          <li class="list-item--hidden">
            <a href="javascript:void(0)" name="category" id="">Item 3</a>
          </li>
          <li class="list-item--hidden">
            <a href="javascript:void(0)" name="category" id="">Item 4</a>
          </li>
          <li class="list-item--hidden">
            <a href="javascript:void(0)" name="category" id="">Item 5</a>
          </li>
          <li><a data-toggle="modal" id="" data-target="" href="">More
            <i class="fa fa-caret-down" aria-hidden="true"></i></a></li>
        </ul>
      </div>
    </div>
</div>
</body>
</html>

答案 2 :(得分：0)

菜单左侧有填充

.categories_menu {
    padding-left:0;
}

悬停时菜单项移动的原因是因为您拥有以下内容

悬停

border-bottom: 5px solid red

非悬停

border-bottom: 1px solid red;

悬停和非悬停之间有4px的空间，因此，悬停时该项将向下移动4px。

悬停时，您应该在<a>上添加边框，而不是<li>

相关问题
最新问题