2

Всем привет. Есть код табов https://jsfiddle.net/nore0x3e/3/

Как видите, кнопки и контент который выводится под ними, растягиваются. У кнопок width:33.33%; у контента который ниже 100%. Все бы отлично, но стоит добавить у кнопок отступ и последняя кнопка уже переносится на новую строку. Тут бы помог:

    margin-right:6px; 
    box-sizing:padding-box;

Но в хроме такая конструкция не работает (padding-box не поддерживается), а вот в файрфоксе отлично.

Так же бы мне помогло:

    border-right: 6px solid #fff;
    box-sizing: border-box;

Но у моих кнопок углы закругленны, в отступ в виде правого белого бордера, получается внутри кнопки, а не снаружи, да и кнопки уже имеют бордер.

В общем, как сделать чтобы блок с кнопками поиска и контент который ниже, растягивались во всю ширину монитора?

0

1 ответ 1

2

Попробуйте

width: calc(33.33% - 6px);
margin-right: 6px;
2
  • 1
    я бы еще добавил .tabs ul.tabs-list li:last-child{ width: 33.33%; margin-right:0; } чтобы последний элемент лучше смотрелся. 27 янв 2017 в 13:38
  • Большое вам спасибо, оба кода выше очень помогли мне.
    – Sky.Ruse
    27 янв 2017 в 14:28

Ваш ответ

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

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