почему мой <ul>выходит за пределы его родителя <div>?Проблема CSS - PullRequest
Новая
       21

почему мой <ul>выходит за пределы его родителя <div>?Проблема CSS

0 голосов
/ 01 мая 2019

Я пытаюсь сделать заголовок моих вкладок отзывчивым, но он (<li>) продолжает выходить за пределы ширины родительского элемента. Я ищу этот код со вчерашнего дня и не могу найти решение.

Пожалуйста, дайте мне знать, если мой код непонятен или я могу сделать что-то большее, чтобы облегчить понимание вопроса, я довольно новичок в этом

/ \ он должен работать только в минимальной ширине: 768px / \

Я очистил код и сделал фрагмент для лучшего понимания: https://jsfiddle.net/Demky/j72cbg9L/

html (только заголовок вкладки, полный код см. В jsfiddle) 

      <div id="tabContainer" class="tabs">
        <div class="tab-button-outer">
          <ul id="tab-button" class="nav nav-tabs">
            <li class="nav-item"><a class="nav-link" href="#tab02" data-toggle="tab">Title_date</a></li>
            <li class="nav-item active"><a class="nav-link active categoriesFont4" href="#tab01"
                data-toggle="tab">actualy actualyactualy text home home homehome  blue red anticonstitutionellement</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
            <li class="nav-item"><a class="nav-link disabled">Disabled</a></li>
          </ul>
        </div>

CSS 


#tabContainer {
  font-family: 'Open Sans', sans-serif;
}

/* ul { */
.tab-button-outer {
  display: flex; /* establish flex container */
  background-color: yellow;
}

/* li { */
  .nav-link {
    flex: 1;
    background-color: lightgreen;
    border: 1px dashed black;
    justify-content: center;
    align-items: center;
  }

#tab-button {
  /* Comment purpel to see the yellow */
  background-color: purple;
  display: table;
  table-layout: fixed;
  /* ! Here if 100% activated, the tab dont go outside of parent */
  /* But then the text go outside of his parent */
  /* width: 100%; */
}

#tab-button li {
  display: table-cell;
}

#tab-button li a {
  display: block;
  padding: 0.5em;
  background-color: #135f63;
  border: 1px solid #02494d;
  text-align: center;
  color: #000;
}

#tab-button li:not(:first-child) a {
  /* Border for all tabs but the first */
  border-left: none;
}

#tab-button li:not(.is-active) a:hover {
  /* Hover a tab not current */
  background-color: #27858A;
}

#tab-button .is-active a {
  /* No border if current tab ! */
  border-bottom-color: transparent;
  background-color: #27858A;
}

#tab-button .disabled {
  /* .nav-item .disabled { */
  /* Change opacity ! */
  opacity: 0.65;
  font-style: italic;
  filter: alpha(opacity=65);

  /* DEACTIVATE CLICk */
  pointer-events: none;
}

.tab-contents {
  padding: .5em 2em 1em;
  background-color: #27858A;
  margin-top: 20px;
  border: 1px solid #0d5a5e;
  border-radius: 0 0 10px 10px;
}

.nav-tabs {
  /* Bootstrap 4 default border-bottom white */
  /* border-bottom: transparent; */
  border-bottom: 0px;
}

.nav-tabs .nav-link {
  /* border-top-left-radius: 0.50rem; */
  /* border-top-right-radius: 0.50rem; */
  border-radius: 10px 10px 0 0;
}

@media screen and (min-width: 768px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }

  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

Скриншоты

Я считаю, что заголовок (первое изображение - область пурпура) не выходит за пределы (второе изображение - желтая область)

1/ Screenshot of the result

2/ Screenshot of the result

Ожидаемый результат:

3

Futur: позже я попытаюсь сделать их всех одинаковой высоты (высота выше), но я бы хотел сначала решить эту проблему
...