当窗口最小化时，按钮的响应能力失败，但它的兄弟响应能力不会失败

Question

所以我有这个 Web UI，我需要 6 个按钮才能响应，其中 5 个运行良好，但最后一个需要放在更右边(图像中的按钮 6(，看起来它必须如何工作。当窗口最大化时，一切看起来都不错：

最大化窗口(看起来不错(

当窗口最小化时，它会尝试保持在视线范围内，但它会与其他按钮一起崩溃，而不是放弃，并且像其他按钮一样，只需执行您在下图中看到的操作：

按钮 5 做对了

相反，按钮 6 执行以下操作：

按钮 6 失败

所以基本上，我找不到一种方法让按钮 6 的行为像其他按钮一样。 这是我的 html：

<div style="display:flex">
<button class="btn btn-primary pin-ready-btn">
1111
</button>
<button class="btn btn-primary pin-ready-btn">
2222222
</button>
<button class="btn btn-primary pin-ready-btn">
3333333
</button>
<button class="btn btn-primary pin-ready-btn">
44444
</button>
<button class="btn btn-primary pin-ready-btn">555555</button>
<button class="btn btn-primary pin-ready-btn" id="btnSix">
6666 6666666 66666666
</button>
</div>

.CSS：

.pin-ready-btn { margin-right: 22px !important; width: auto !important; }
#btnSix{ position: absolute !important; right: 70px !important; }

感谢大家的阅读，花时间和回答。

Answer 1

代码有一个错误，第二个按钮有 2 个结束标签

下面是工作代码，希望这是您所需要的。

<style>
.btn-holder { display:flex; justify-content:flex-start;}
.btn-holder button { background:#00a7ef; font-size:15px; color:#fff; border:0; cursor:pointer; margin:0 20px 0 0; padding:10px; border-radius:3px;}
.btn-holder button:last-child { margin-left:auto;}
</style>
<div class="btn-holder">
<button class="btn btn-primary pin-ready-btn">
1111
</button>
<button class="btn btn-primary pin-ready-btn">
2222222
</button>
<button class="btn btn-primary pin-ready-btn">
3333333
</button>
<button class="btn btn-primary pin-ready-btn">
44444
</button>
<button class="btn btn-primary pin-ready-btn">555555</button>
<button class="btn btn-primary pin-ready-btn" id="Re-RunValidationBtn">
6666 6666666 66666666
</button>
</div>