如何防止提交按钮缩小，使其无响应?

Question

我有一个简单的页面，在一个更大的网站中有两个按钮。 调整页面大小时，一个按钮会缩小 - 例如，当我在 Firefox 中打开书签浮出控件时，或者当我使用 ctrl-plus 和 ctrl-minus 或鼠标滚轮以更大和更小的大小显示页面时。

与其他页面元素不同，非响应按钮的左边缘保持锚定在同一点，但右边缘收缩(向左移动)，因此其相对于其他元素的大小会发生变化，使其无响应。

此按钮不会收缩：

<div class="ttg_text_grid2">
<label for="file-upload" class="custom-file-upload">Select file</label>
<input id="file-upload" type="file"/>
</label>
</div>

此按钮收缩：

<div class="ttg_text_grid3">
<button class="custom-file-upload" id="submit_btn" type="submit" value="Submit" onsubmit="submit_btn.disabled = true; return true;">Take action</button></div>

页面顶部还有不缩小的文本。

以下是相关的 css：

.ttg_text_grid2 {
grid-column: 9 / 15;
grid-row: 6 / 19;
padding-left: 22.5%;
}
.ttg_text_grid3 {
grid-column: 9 / 15;
grid-row: 6 / 19;
padding-left: 11%;
}
.custom-file-upload {
border: 1px solid rgb(117,163,126);
background-color: black;
width: 65%;
padding: 8px 20px;
border-radius: 15px;
font-size: 20px;
font-family: Sans-serif;
font-size: 13pt;
text-align: center;
color: rgb(255,255,255);
cursor: pointer;
}
input[type=file] {
display: none;
}

基于上面的 html 和 css，为什么第一个按钮大小不改变大小，第二个按钮缩小和扩展？

这对于响应式设计很重要。 整个站点都是 css 网格，除了这个之外，站点上的其他所有内容都是响应式的。

感谢您的任何想法。

Answer 1

您的.custom-file-upload类具有基于百分比的宽度值。 例如，通过将其更改为200px，将确保它不会根据屏幕尺寸改变大小。

.custom-file-upload {
border: 1px solid rgb(117,163,126);
background-color: black;
width: 65%; <!-- change this to to a px value -->
padding: 8px 20px;
border-radius: 15px;
font-size: 20px;
font-family: Sans-serif;
font-size: 13pt;
text-align: center;
color: rgb(255,255,255);
cursor: pointer;
}

Answer 2

我认为重点是它的宽度在%中;所以显然它应该缩小和扩大。 尝试从 css 中删除宽度属性。

请改用填充来保持按钮大小始终相同，或者只在 px 中使用静态大小。