我有一个简单的HTML页面,只有一个文本字段和一个按钮。
但是,文本字段太宽。如何将最大宽度(可视长度而不是字符数)限制为200px?如果可能没有Javascript,并且可能的话,宽度应保持在100%。我玩的是maxlength和size,但没有成功。
https://jsfiddle.net/Smolo/udh9s6j2/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>
使用CSS max-width
应该可以解决问题。
说明: CSS的max-width
确保目标元素的宽度不超过200px(即使设置了width:100%
),即,您所用元素的实际宽度将等于100%或200像素,以较小者为准。
.form-control {
max-width:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class='col-sm-12'><form action='' method='post'>
<table class='table table-hover table-responsive table-bordered'>
<tr>
<td>Password</td>
<td><input type='password' name='password' class='form-control' required></td>
</tr>
<tr>
<td></td>
<td><button type='submit' class='btn btn-primary'>Reset</button></td>
</tr>
</table>
</form></div></div>
</body>
</html>