今天我尝试在max-width: 200px上设置<input type="text">，但显然它被浏览器忽略。
如果设置了width: 200px，则可以正确应用（但如果input字段的尺寸小于200px，则不会调整大小。
如何将max-width CSS属性应用于输入字段？
如果您设置max-width：200px;那么您必须以相对单位（例如％）设置宽度。因为如果您设置width：200px，输入的位置将不会改变；
这是一个示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style type="text/css" media="screen">
div{
background-color: tomato;
width: 100%;
max-width: 1024px;
margin: auto;
}
input{
margin: auto;
background-color: red;
display: block;
margin-bottom: 2rem;
}
input#no-fluid{
border:2px black dotted;
width: 200px;
max-width: 300px;
}
input#fluid{
border:2px black solid;
width: 50%;
max-width: 300px;
}
</style>
</head>
<body>
<div>
<input id="no-fluid" type="text">
<input id="fluid" type="text">
</div>
</body>
</html>当您调整屏幕大小时，流体输入将改变其宽度，但最多只能更改300px（最大宽度）。即使您调整屏幕大小，非流畅的按钮仍将保持其宽度
HOPE这有助于T04435
您可以做的另一件事是将max-width设置为200px，然后您可以使用width: 200px将宽度设置为任何宽度。即使超过max-width，其最大宽度也始终为200px，如果将其尺寸调整为小于200px，则其最大尺寸将缩小为200px。您可以使用此jsfiddle进行操作。