Css - автоматическое растягивание кнопок по горизонтали

Я пытаюсь понять, как использовать этот пример w3schools

Как изменить его, чтобы кнопки растягивались на всю ширину страницы?

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

Вот он в JSFiddle

Соответствующее вырезание кода CSS:

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  width: 15%; // <------ hardcoded width 
}

Пожалуйста, не используйте сайты с внешним кодом для публикации кода. Stackoverflow покроет вас фрагментами. Научитесь их использовать.

— 15.02.2019 21:03

css html

15.02.2019 17:38

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

107

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Вы можете использовать флекс. Добавьте набор div-обертки в display: flex и добавьте flex-basis: 100% в .tablink.

.tab-container {
  display: flex;
  width: 100%;
}

.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  flex-basis: 100%;
}

<div class = "tab-container">
  <button class = "tablink" onclick = "openPage('Home', this, 'red')">Home</button>
  <button class = "tablink" onclick = "openPage('News', this, 'green')" id = "defaultOpen">News</button>
  <button class = "tablink" onclick = "openPage('Contact', this, 'blue')">Contact</button>
  <button class = "tablink" onclick = "openPage('About', this, 'orange')">About</button>
</div>

Вот отличный шпаргалка по флексбоксу.

15.02.2019 17:55

Изменение ширины на 25% поможет.

15.02.2019 17:56

Вы можете использовать flexbox для достижения этой цели. Поскольку используемые вкладки элементов добавляются динамически, вы должны удалить жестко заданную ширину, как указано в вашем комментарии, и добавить родительский элемент div к кнопкам со свойством display:flex. Замените часть HTML, где отображаются кнопки, на этот

 <div class = "tabBar">
 <button class = "tablink" onclick = "openPage('Home', this, 'red')">Home</button>
<button class = "tablink" onclick = "openPage('News', this, 'green')" id = "defaultOpen">News</button>
<button class = "tablink" onclick = "openPage('Contact', this, 'blue')">Contact</button>
<button class = "tablink" onclick = "openPage('About', this, 'orange')">About</button>
</div>

И добавьте это в css

.tabBar {
    display: flex;
    flex-wrap: wrap;
}
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;

}

Рабочая демонстрация — здесь.

15.02.2019 17:57