Как стилизовать вкладки (CSS)

166

04 декабря 2019, 08:50

Я не могу понять, как растянуть вкладки (EXPRESS и LOGISTICS) на требуемую ширину и убрать отступ между ними.

Требуется:

У меня сейчас так: https://codepen.io/molekylko/pen/XGqjvj

введите сюда код

Буду благодарен, если кто-нибудь подскажет, что нужно подкорректировать, чтобы было как на картинке.

Answer 1

Результат : https://codepen.io/topicstarter/pen/qvYqoY

.tabs { 
  position: relative; 
  margin: 20px 120px 0 15%; 
  width: 300px; 
  height: 560px; 
  display: flex; 
} 
 
input[type="radio"] { 
  display: none; 
} 
 
.tab, 
.tab-title { 
  display: inline-block; 
} 
 
.tab :checked+.tab-title { 
  position: relative; 
  background: #ba0000; 
  top: 1px; 
  z-index: 1; 
} 
 
.tab-content { 
  background-color: #ba0000; 
  box-sizing: border-box; 
  padding: 10px; 
  border: none; 
} 
 
.tab :checked+.tab-title+.tab-content { 
  display: block; 
} 
 
.tab { 
  background-color: #ba0000; 
} 
 
.tab label { 
  width: 200px; 
} 
 
.tab-title { 
  background: #ffcc00; 
  padding: 5px 10px; 
  border: none; 
} 
 
.tab-content { 
  position: absolute; 
  left: 0; 
  box-sizing: border-box; 
  width: 100%; 
  display: none; 
  height: 460px; 
  width: 400px; 
}

<div class="tabs"> 
  <div class="tab"> 
 
    <input type="radio" id="tab1" name="tab-group" checked> 
    <label for="tab1" class="tab-title">Express</label> 
    <section class="tab-content"> 
      Содержимое вкладки1 
    </section> 
  </div> 
  <div class="tab minus"> 
 
    <input type="radio" id="tab2" name="tab-group"> 
 
    <label for="tab2" class="tab-title">Logistics</label> 
 
    <section class="tab-content"> 
      Содержимое вкладки2 
    </section> 
  </div> 
</div>