Как ограничить максимальную ширину текстового поля? - PullRequest
Новая
       37

Как ограничить максимальную ширину текстового поля?

0 голосов
/ 10 ноября 2019

У меня есть простая html-страница с одним текстовым полем и кнопкой.

enter image description here

Однако текстовое поле очень широкое. Как я могу ограничить максимальную ширину (визуальная длина, а не номер символа) до 200px?
Если возможно без Javascript и, если возможно, ширина должна сохраняться на уровне 100%. Я играл с максимальной длиной и размером, но безуспешно.

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>

1 Ответ

1 голос
/ 10 ноября 2019

Использование CSS max-width должно помочь.

Объяснение: CSS's 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...