<输入大小..> 不改变输入字段的大小[重复]答案

【问题标题】：<input size..> does not change the size of input field [duplicate]<输入大小..> 不改变输入字段的大小[重复]
【发布时间】：2019-05-10 03:49:12
【问题描述】：

我的代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <title>Challengers</title>
</head>
<body>
<div class="w3-container" align="center">

    <form action="/addChallenger" method="post" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin w3-center" style="width: 50%" >
          <div class="w3-row w3-section">
            <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-user"></i></div>
            <div class="w3-rest">
                <input class="w3-input w3-border" size="40" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">
            </div>
        </div>
    </form>
</div>
</body>
</html>

因此，在后续字符串中，我使用size 参数来设置输入字段的大小，但结果我没有任何效果。

<input class="w3-input w3-border" size="40" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name">

如何正确设置字段大小？

【问题讨论】：

您确实设置了正确的大小——这就是 size 属性的用途，它可以让您衡量输入的近似/所需大小。您最好确保没有将某些 CSS 规则应用于您的输入控件，您可以使用例如Firefox 或 Chrome，都有开发者工具来帮助你。
如何更改 CSS 规则？我不是前端开发人员 - 我是 java 的初学者，所以我不知道如何在浏览器中使用开发人员工具

标签： html forms

【解决方案1】：

如何正确设置字段大小？

在 HTML5 中，您应该使用 CSS，但是在 HTML 和 CSS 规则 will work 中都使用 size，但 CSS 将推翻任何给定的 size 值。

CSS 有一个特殊的单元，称为ch 单元。（see here 和here）在all current browsers (except Opera Mini) 中有效。

此外，字符宽度默认值应由 DOM 层次结构中某处的 font-size CSS 元素定义。

input[type=text]{
  /* Set width to 40characters */
  width: 40ch;
  /* prevent overflow of container */
  max-width: 100%; 
}

&lt;input class="w3-input w3-border" name="lastName" type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for last names.." title="Type in a last name"&gt;

【讨论】：

再一：如何设置输入框位置居中？
@ValentynHruzytskyi 你是指输入中心的文本还是屏幕中心的输入？
屏幕中心的输入
@ValentynHruzytskyi 有 LOTS 的 StackOverflow Q&A on this topic，尝试自己挖掘它们 ;-)