Question

我正在尝试找出如何使用此w3schools example

如何修改它，以使按钮伸展以填满整个页面宽度？

我想动态添加按钮，但不知道按钮的宽度。

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％即可解决问题。

css-水平自动拉动按钮

3 个答案: