Активная граница вкладки внизу под div вместо div - PullRequest
Новая
       16

Активная граница вкладки внизу под div вместо div

1 голос
/ 26 сентября 2019

Я сделал упаковщик вкладок с 2 вкладками.Под вкладками у меня есть div с контентом.

Это мой код: 

.tab-wrapper {
  width: auto;
  padding-left: 17px;
  background-color: aqua;
  white-space: nowrap;
  display: table-cell;
}

.content {
  background-color: aqua;
}

.role-tab {
  cursor: pointer;
  display: inline-block;
  height: 50px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  margin-right: 19px;
}

.role-tab>p {
  display: table-cell;
  height: 50px;
  overflow: visible;
  vertical-align: middle;
  width: 100%;
}

.role-tab-active {
  border-bottom: 3px #108DE7 solid;
  font-weight: bold;
}
<div class="tab-wrapper">
  <div class="role-tab role-tab-active">
    <p>Role tab 1</p>
  </div>
  <div class="role-tab">
    <p>Role tab 2</p>
  </div>
</div>
<div class="content">
  <p>Content</p>
</div>

Стиль и все работает хорошо.Теперь я хочу добавить padding-top, чтобы border-bottom перешел под div.Это скриншот, который я хочу:

Screenshot

Я хочу, чтобы border-bottom перешел под div вместо в div.

Я пробовал margin-top, padding-top и top, но это не сработало

Как я могу достичь, когдавкладка активна, что border-bottom идет под div вместо этого внутри нее?

Ответы [ 2 ]

1 голос
/ 26 сентября 2019

просто установите margin-bttom: -3px; для активного класса и все готово: 

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}

см. Фрагмент ниже: 

.tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: table-cell; 
}

.content{    
    background-color: aqua;
}

.role-tab {
    cursor: pointer;
    display: inline-block;
    height: 50px;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    vertical-align: middle;
    margin-right: 19px;
    margin-bottom:-3px;
}

    .role-tab > p {
        display: table-cell;
        height: 50px;
        overflow: visible;
        vertical-align: middle;
        width: 100%;
    }

.role-tab-active {
    margin-bottom:-3px;
    border-bottom: 3px #108DE7 solid;
    font-weight: bold;
}
<div class="tab-wrapper">
    <div class="role-tab role-tab-active">
        <p>Role tab 1</p>
    </div>
    <div class="role-tab">
        <p>Role tab 2</p>
    </div>
</div>

<div class="content">
<p>Content</p>
</div>
1 голос
/ 26 сентября 2019

Вы не можете перемещать границы с помощью отступов и полей.Это не элемент, а часть элемента.

Дайте .tab-wrapper статическую высоту вместо значения по умолчанию auto.Каким бы ни был размер вашей границы, содержащийся div будет подстраиваться под него, поэтому мы даем ему статическую высоту, чтобы допустить переполнение.И затем сделайте это display:flex. 

.tab-wrapper {
    width: auto;
    padding-left: 17px;
    background-color: aqua;
    white-space: nowrap;
    display: flex; 
    height: 50px;
}

. Вы можете видеть, что родительский элемент и элемент табуляции имеют высоту 50px, но это не совсем так при рендеринге.box-sizing: content-box как свойство css по умолчанию, ваша официальная высота вкладки активной роли равна 53px, таким образом, переполняя div на 3px и давая границе эффект "under div"

Fiddle: https://jsfiddle.net/c5u3wzv2/5/

...