равномерно распределить кнопки меню с вкладками html

Question

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

    .tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      margin-top: 20px;
    }
    
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    
    .tab button:hover {
      background-color: #ddd;
    }
    
    .tab button.active {
      background-color: #ccc;
    }
    
   

<div class="tab">
	<button class="tablinks">Today</button>
	<button class="tablinks">This Week</button>
	<button class="tablinks">This Month</button>
</div>

Спасибо

Answer 1

дисплей Flex предоставляет различные варианты для получения вашего запроса. Например, пространство равномерно

.tab {
      overflow: hidden;
      border: 1px solid #ccc;
      background-color: #f1f1f1;
      margin-top: 20px;
      display: flex;
      justify-content: space-evenly;
    }
    
    .tab button {
      background-color: inherit;
      float: left;
      border: none;
      outline: none;
      cursor: pointer;
      padding: 14px 16px;
      transition: 0.3s;
      font-size: 17px;
    }
    
    .tab button:hover {
      background-color: #ddd;
    }
    
    .tab button.active {
      background-color: #ccc;
    }

<div class="tab">
			<button class="tablinks">Today</button>
			<button class="tablinks">This Week</button>
			<button class="tablinks">This Month</button>
</div>

Answer 2

Самый простой способ - просто добавить ширину: 33% для кнопки

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 20px;
}

.tab button {
  width: 33.33%;;
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

<div class="tab">
			<button class="tablinks">Today</button>
			<button class="tablinks">This Week</button>
			<button class="tablinks">This Month</button>
</div>

Answer 3

Немного поздно, но вы также можете использовать кнопки сетка , вот рабочий фрагмент:

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 20px;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
}

.tab button {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  min-width: 33%;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

<div class="tab">
  <button class="tablinks">Today</button>
  <button class="tablinks">This Week</button>
  <button class="tablinks">This Month</button>
</div>

Answer 4

Это пример, где вы можете делать вкладки равномерно. (примечание: это только HTML пример не работает.)

ul {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li {
  width: 20%;
  text-align: center;
  background-color: #cdd17d;
  margin-right: 2%;
  padding: 10px;
}

.active {
  background-color: #e0e39d;
}

div {
  background-color: #e0e39d;
  width: 90vw;
  height: 20vh;
}

<ul>
  <li class='active'>asia</li>
  <li>australia</li>
  <li>new zealand</li>
</ul>
<div></div>