css - 水平自动拉伸按钮

Question

我想弄清楚如何使用这个w3schools example

如何修改它，以便按钮拉伸以填充整个页面宽度？

我想动态添加按钮但不提前知道它们的宽度。

这是在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

你可以使用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>

这是一个伟大的flexbox cheatsheet。

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%;

}

一个工作演示是here

Answer 3

将宽度更改为25％就可以了。