如何在一个div中设置两个按钮的样式

Question

一个div中可能有样式按钮吗？

我希望在后端出现清除按钮时设置按钮样式。

当第二个按钮消失时，第一个按钮应为width: 100%;。有解决方案吗我尝试了button ~ button，它只适用于last-child。

请检查代码段

.container button + button:first-child {
   width: 60%;
   float: left;
}
.container button + button:last-child {
   width: 40%;
   float: left;
}

<div class="container">
   <button>Visit</button>
   <button>Clear</button>
</div>

Answer 1

使用Flexbox：

.container {
  display: flex;
}

.container button:first-child {
  width: 40%;
}

.container button:last-child {
  flex-grow: 1;
}

<div class="container">
  <button>Visit</button>
  <button>Clear</button>
</div>