时间戳

首页 > 解决方案 > 减小浏览器宽度时按钮被按下

html - 减小浏览器宽度时按钮被按下

问题描述

我有一个 div，其中包含三个元素：标签、输入框和按钮。它们每个都有 30% 的宽度，因此在调整浏览器大小时它们应该变小，但按钮在某些时候会被按下。这是代码

<!DOCTYPE html>
<html style="height: 100%; margin: 0">
<head>
<title></title>

</head>
<body style="height: 100%; margin: 0">

<div style="width: 30%; height: 20%;  background-color:red; text-align: center; ">
<label style="height: 80%; width: 30%; display: inline-block;">Table No: </label>
<input style="height: 80%; width: 30%" type="text" name="">
<button style="height: 80%; width: 30%">Back</button>
</div>


</body>
</html>

如何防止按钮被按下？

标签： htmlcss

解决方案

向您的父母申请display:flex;或display:inline-flex;（取决于您的目的）<div>将解决您的问题。但是，我强烈建议您重构布局并考虑对其使用媒体查询。在小尺寸屏幕的情况下，您可以width:100%;为您的父母使用，也可以像现在一样<div>使用较大的屏幕尺寸。width:30%;媒体查询是让您的网站响应的更好选择，而不是仅仅依靠 CSS 百分比。

推荐阅读