html - 均匀分布 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>

谢谢

标签： htmlcss

Answer 1

最简单的方法是为按钮添加 width: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>