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

Question

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

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

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

Здесь это в 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 
}

Answer 1

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

Answer 2

Вы можете использовать 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%;

}

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

Answer 3

Вы можете использовать flex.Добавьте оберточный 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>

Вот отличная флексбокс .