按钮正在调整到它的容器中，无法变得更小。_编程开发

按钮正在调整到它的容器中，无法变得更小。

创始人

2024-11-04 09:30:46

0次

要将按钮调整到它的容器中，并防止其变得更小，可以使用以下代码示例：

HTML代码：

CSS代码：

.container {
  width: 200px; /* 容器的宽度 */
  height: 100px; /* 容器的高度 */
  position: relative; /* 设置容器为相对定位，以便按钮能相对于容器定位 */
}

.btn {
  position: absolute; /* 设置按钮为绝对定位 */
  top: 50%; /* 将按钮的顶部与容器的垂直中心对齐 */
  left: 50%; /* 将按钮的左侧与容器的水平中心对齐 */
  transform: translate(-50%, -50%); /* 使用transform属性将按钮居中 */
  min-width: 100%; /* 设置按钮的最小宽度为容器的宽度，防止按钮变得更小 */
  min-height: 100%; /* 设置按钮的最小高度为容器的高度，防止按钮变得更小 */
}

在上述代码中，我们将容器的宽度设置为200px，高度设置为100px。然后，设置按钮为绝对定位，并使用top和left属性将其居中对齐。最后，使用min-width和min-height属性将按钮的最小宽度和最小高度设置为容器的宽度和高度，这样按钮就无法变得更小了。

通过以上代码，按钮将始终调整到容器中，并且无法变得更小。您可以根据需要调整容器的宽度和高度，以及按钮的样式。

上一篇：按钮粘滞时影响其他内容向下移动。

下一篇：按钮值不遵循输入的最大长度（销售点/角度）

按钮正在调整到它的容器中，无法变得更小。

相关内容

热门资讯