html - 使用 CSS 将提交按钮保持在父表单内

Question

上下文：我有一个带有表单的 Web 应用程序，其中提交按钮显示在“文本”类型的输入的右侧

.

预期目标：我希望此表单上的提交按钮在所有屏幕尺寸上都是圆形的。虽然按钮在桌面尺寸的屏幕上是圆形的，但在移动尺寸的屏幕上它会被拉伸成椭圆形（上面链接的示例图片）

我尝试过的：我尝试用 !important 在我的 CSS 文件中标记按钮的宽度/高度元素，认为这将保持其尺寸不变并减少文本输入的宽度。但是，当屏幕宽度减小时，按钮的宽度和文本输入都会缩小。

问：我可以使用什么 CSS 代码在所有屏幕尺寸上保持按钮圆形？

请在下面找到我的代码：

.box {
  max-width: 400px;
  margin: 50px auto;
  border-radius: 5px;
  box-shadow: 5px 5px 15px -5px rgba(0, 0, 0, 0.3);
}

.item {
  min-height: 70px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #F1F1F1;
}

form.item {
  text-align: center;
  margin-left: 20px;
}

button {
  height: 50px !important;
  width: 50px !important;
  border-radius: 50%;
  font-size: 30px;
  padding: 6px;
  border-width: 0;
}

input[type="text"] {
  text-align: center;
  height: 60px;
  top: 10px;
  border: none;
  font-size: 20px;
  font-weight: 200;
  width: 322px;
}

 <div class="box">
      <form action="/delete" method="post">
        <div class="item">
          <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form.submit()">
          <p><%=item.name%></p>
        </div>
      </form>

      <form class="item" action="/" method="post">
        <input type="text" name="newItem" placeholder="New Item" autocomplete="off">
        <button type="submit" name="list" value="<%= listTitle %>">+</button>
      </form>
</div>

    

此外，这是我的第一个 Stack Overflow 问题帖子，因此请随时提供任何建议以改进我未来的帖子。提前感谢您的宝贵时间！

标签： htmlcss