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

最简单的方法是为按钮添加宽度：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 2

display 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 3

有点晚了，但是您也可以使按钮使用grid layout，这是一个有效的代码段：

.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>

均匀分布html标签菜单的按钮

4 个答案: