Je veux avoir un menu avec certains éléments, chaque élément devrait avoir une bordure à droite, et il devrait également y avoir une bordure en bas mais occupant toute la largeur. Le problème est que le fond de la bordure n'occupe que le conteneur avec, pas la largeur totale. La classe de conteneur doit être nécessaire car le texte des catégories ne doit occuper que la largeur du conteneur.

De plus, lorsque l'utilisateur survole chaque élément, il devrait apparaître une bordure en bas sous l'élément, et son fonctionnement, le problème est que lorsque l'utilisateur survole chaque élément, le texte de l'élément bouge un peu, savez-vous pourquoi?

Savez-vous comment résoudre ces problèmes?

Le code avec les problèmes: 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;

    }

  }
}
0
user10676579 20 nov. 2018 à 23:51

3 réponses

Meilleure réponse

Pour créer un conteneur pleine largeur, vous pouvez utiliser container-flex au lieu de container. Créez un row à l'intérieur du conteneur et placez-y le 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>

Et utilisez ce style:

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

Pour éviter les problèmes de déplacement du survol <li>, utilisez ce style:

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>
0
Irina 20 nov. 2018 à 21:20

Il y a un rembourrage à gauche du menu

.categories_menu {
    padding-left:0;
}

La raison pour laquelle l'élément de menu se déplace lorsque vous survolez, c'est parce que vous avez les éléments suivants

Flotter

border-bottom: 5px solid red

Non stationnaire

border-bottom: 1px solid red;

Il y a 4 px d'espace entre le survol et le non-survol, donc l'élément se déplacera de 4 px vers le bas lors du survol.

Vous devez ajouter une bordure au <a> lors du survol au lieu du <li>

0
jeanpaulxiao 20 nov. 2018 à 21:15

EDIT: j'ai vu votre commentaire ci-dessus. Pouvez-vous créer un nouveau div?

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

Donnez-lui simplement une bordure inférieure et il enveloppe votre conteneur afin que votre menu soit toujours dans la largeur du conteneur.

0
jds 20 nov. 2018 à 21:08