1

На данный момент так:

введите сюда описание изображения

Каким образом сделать так, чтобы у активной вкладки не было подчёркивания? Возможно как-то переделать, главное не использовать что-то наподобии margin-top: -1px.

введите сюда описание изображения

https://jsfiddle.net/ox3kx17c/1/

.tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.tabs a {
  text-decoration: none;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 18px;
  color: #444444;
  -webkit-border-top-left-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.tabs a.active {
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-bottom: none !important;
  color: #1e7ec8 !important
}
<div class="tabs">
  <a href="#" class="active">Настройки</a>
  <a href="#">Мои заказы</a>
  <a href="#">Test</a>
</div>

9

2 ответа 2

2

Зафиксировать высоту вкладки и высоту контейнера. Добавить активной вкладке нижнюю границу под цвет фона страницы.

.tabs {
  margin-bottom: 20px;
  border-bottom: 1px solid #bfbfbf;
  height:42px;
}

.tabs a {
  text-decoration: none;
  display: inline-block;
  padding:10px 15px;
  height:21px;
  font-size: 18px;
  color: #444444;
  border-radius:10px 10px 0 0;
}

.tabs a.active {
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-bottom-color:#FFF;
  color: #1e7ec8 !important;
}
<div class="tabs">
  <a href="#">Настройки</a>
  <a href="#" class="active">Мои заказы</a>
  <a href="#">Test</a>
</div>

1

* {
  box-sizing: border-box;
}
.tabs {
  margin-bottom: 20px;
  font-size: 0;
  position: relative;
}
.tabs a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  font-size: 18px;
  color: #444444;
  border-radius: 10px 10px 0 0;
}
.tabs a.active {
  position: relative;
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-bottom: none;
  color: #1e7ec8 !important;
}
.tabs:before,
.tabs a.active:before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #bfbfbf;
}
.tabs a.active:before {
  background: #fff;
}
<div class="tabs">
  <a href="#" class="active">Настройки</a>
  <a href="#">Мои заказы</a>
  <a href="#">Test</a>
</div>

1
  • спасибо большое за помощь! :)
    – ModaL
    3 мая 2016 в 17:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.