如何限制文本字段的最大宽度？答案

【问题标题】：How do I limit the maximum width of a text field?如何限制文本字段的最大宽度？
【发布时间】：2019-11-10 17:38:19
【问题描述】：

我有一个简单的 html 页面，只有一个文本字段和一个按钮。

但是，文本字段太宽了。如何将最大宽度（视觉长度而不是字符数）限制为 200 像素？
如果可能不使用 Javascript，并且如果可能，宽度应保持在 100%。我玩了 maxlength 和 size 但没有成功。

<!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>

【问题讨论】：

标签： html forms twitter-bootstrap

【解决方案1】：

使用 CSS max-width 应该可以解决问题。

说明： CSS 的 max-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>

【讨论】：

谢谢！我决定使用内联 style='max-width:200px' 为该元素应用样式。