html - 如何限制文本字段的最大宽度?
问题描述
我有一个简单的 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>
解决方案
使用 CSSmax-width
应该可以解决问题。
说明: CSSmax-width
确保目标元素的宽度不超过 200 像素(即使有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>
推荐阅读
- php - 破坏参数数组php
- javascript - 将嵌套对象写入 Apollo 客户端缓存
- javascript - HTML textarea 行数
- python - 打印字符串与添加到列表不同,为什么?
- python - 做什么
在函数名中是什么意思? - java - 密钥库操作失败:填充模式不兼容
- javascript - 共享后端和前端输入验证或模块
- c - C中的免费未初始化指针
- c# - Json 反序列化 - 如何将剩余项目添加到字典中?
- python - Keras Lambda 层给出 ValueError: Input 0 is incompatible with layer xxx: expected min_ndim=3, found ndim=2