window 最小化时按钮的响应失败，但它的兄弟响应不会失败

Question

所以我有这个 Web UI，其中我需要 6 个按钮来响应，其中 5 个工作得很好，但最后一个需要放在更右边（图中的按钮 6），确实看起来不应该如何工作。当 window 最大化时，一切看起来都不错：

Maximized window (Looking good)

当 window 被最小化时，它试图保持在视线范围内，但它使它与其他按钮一起崩溃而不是仅仅放弃，并且像其他按钮一样，只是做您可以在下一张图片中看到：

Button 5 doing it right

相反，按钮 6 执行此操作：

Button 6 failing

基本上，我找不到让按钮 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

代码有 1 个错误，第 2 个按钮有 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>

window 最小化时按钮的响应失败，但它的兄弟响应不会失败

Responsiveness of a button fails when window minimized, but it's brothers responsiveness don't fail

html

css

web-deployment

responsive-design

responsive