输入大小与宽度

231

<input name="txtId" type="text" size="20" />

要么

<input name="txtId" type="text" style="width: 150px;" />

哪个是最佳的跨浏览器代码？

当然，这取决于要求，但是我很好奇知道人们是如何决定的以及基于什么基础。

html css

— 拉贾夫克
source

17

在网络上使用“ px”通常是个坏主意。您可能会考虑使用相对单位（“ em”，“％”等）。

— kangax

37

@kangax这只是一种意见；关于使用px尚无共识

— Kos 2015年

7

@Kos有点像共识。不再（与IE和其他旧的浏览器一起）消失。

— kangax

9

@kangax我从来没有得到那个备忘录...我一直都在使用px，并且一直都有。

— 安德鲁

180

您可以同时使用。css样式将覆盖size支持CSS的浏览器中的属性，并使该字段具有正确的宽度，而对于不支持该样式的字段，它将退回到指定的字符数。

编辑：我应该提到size属性不是精确的大小调整方法：根据HTML规范，它应该引用输入将能够立即显示的当前字体的字符数。

但是，除非指定的字体是固定宽度/等宽字体，否则不能保证指定数量的字符实际上是可见的；在大多数字体中，不同的字符将具有不同的宽度。这个问题对此问题有一些很好的答案。

下面的代码段演示了这两种方法。

@font-face {
    font-family: 'Diplomata';
    font-style: normal;
    font-weight: 400;
    src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
    font-family: 'Open Sans Condensed';
    font-style: normal;
    font-weight: 300;
    src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
  margin: 0 0 10px 0;
}
input {
  font-size: 20px;
}
.narrow-font {
  font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
  font-family: 'Diplomata', cursive;
}
.set-width {
  width: 220px;
}

<p>
  <input type="text" size="10" class="narrow-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="narrow-font set-width" value="0123456789" />
</p>
<p>
  <input type="text" size="10" class="wide-font set-width" value="0123456789" />
</p>

展开摘要

— 马克·贝尔
source

2

@MarkB。感谢您的回答。我在这里用内联样式提问。

— rajakvk

不用担心-我想您可能会知道，但我只是指出了以防万一。

— Mark Bell

大多数字体不是等宽字体。关于“该字段将能够立即显示的字符数”...。您是指哪个字符？

— Pacerier，2015年

@Pacerier输入使用的哪种字体的字符数：jsbin.com/zimako/1

— Mark Bell

1

@jbyrd是的，是的，但是根据HTML规范，答案是正确的。我现在已经编辑了答案，以使情况有所澄清。

— 马克·贝尔

49

我建议，最好的方法可能是以em为单位设置样式的宽度:)因此，对于20个字符的输入大小，只需设置style='width:20em':)

— 思想家
source

4

有趣的是，但是在我的测试中，width：20em使得输入的字符数远远超过20个字符。

— Christophe

32

“ em”是对“ M”字符高度的度量，这就是盒子太大的原因。

— humbads

9

在CSS中，em与其直接或最接近的父字体的字体大小有关。示例：如果元素的继承字体大小为16px，并且您将字体大小设置为2em，则结果大小将为32px（16px * 2em）。“ em”单位不是字符数。更多：w3.org/TR/css3-values/#font-relative-lengths和kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs和j.eremy.net/confused -about-rem-and-em

— delroh 2014年

1

@humbads您不是要对'M'字符的宽度进行度量吗？

— 杰西

5

@杰西，好问题。在排版中，“ em”用来表示“ M”字符的宽度。很长一段时间，我都相信同一件事。但是，在CSS和数字排版中，“ em”等于字体的高度（以磅为单位）。这是为了容纳没有'M'字符或'M'不是字体的完整高度或宽度的字符集。

— humbads 2015年

21

size 在不同的浏览器及其可能的字体设置中不一致。

width以px为单位设置的样式至少将是一致的，框大小调整问题。如果您想相对于字体设置大小，则可能还需要在'em'中设置样式（不过，除非您font明确设置输入的字体和大小，否则这将是不一致的）；如果要在字体中设置字体，则为'％'。液体布局形式。无论哪种方式，样式表都可能比内联style属性更可取。

您还需要size为<select multiple>这个高度与正确的选项来排队。但我不会在上使用它<input>。

— 博宾斯
source

13

我想说这违背了“传统智慧”，但我通常更喜欢使用尺寸。这样做的原因恰恰是许多人拒绝的原因：字段的宽度会因浏览器而异，具体取决于字体大小。具体来说，无论浏览器设置如何，它始终足够大以显示指定数量的字符。

例如，如果我有一个日期字段，我通常希望该字段足够宽以显示8或10个字符（两位数字的月份和日期以及两位或四位数的年份，并带有分隔符）。设置size属性从本质上保证了整个日期都是可见的，并且浪费的空间最少。同样，对于大多数数字-我知道期望值的范围，因此我将size属性设置为适当的数字位数，如果适用，还要加上小数点。

据我所知，没有CSS属性可以做到这一点。例如，在em中设置宽度是基于高度而不是宽度，因此如果要显示已知数量的字符，则不是很精确。

当然，这种逻辑并不总是适用-例如，名称输入字段可以包含任意数量的字符。在这些情况下，我将退回CSS宽度属性，通常以px为单位。但是，我要说的是，我制作的大多数字段都有某种已知的内容，通过指定size属性，我可以确保大多数的内容，在大多数情况下，是不削波显示。

— 艾伯斯特
source

您也可以ex为此使用单位，尽管使用大小仍然可以简化大多数情况，因为CSS中没有很多ID /类来提供宽度。

— 四十

@Forty实际上，你不能。ex是字符的高度（特别是“ X”），而不是宽度-就像em。由于字符的高度和宽度（x或其他值）之间没有固定的关系，因此没有理由相信使用字符的高度来设置字段的宽度会使该字段成为适当的宽度以显示任何字符给定字符数。它可以更宽或更窄，具体取决于字体。现在，该ch单元看起来很有希望，但低于9的IE不支持该单元，当我编写此单元时，这将是一个问题。

— ibrewster '17

是的，但是x的高度通常永远不会小于宽度，大多数时候实际上实际上是稍高或几乎相同，因此它非常接近。ch不幸的是，它本来可以做得更好，有些零很稀薄，可能无法测量完整的字符空间...

— 2015年

@Forty True，因此，我的原始观点是，没有很好的CSS属性可用于将输入字段的宽度设置为特定数量的字符，而该size属性努力做到这一点。您可能是对的，这ex是一个合理的选择，但事实是它是高度属性，而不是宽度属性。size是width属性，而不是css。

— ibrewster '17

它已经足够接近可以使用了，只是在这种情况下不实际:)

— 2015年

4

我只是在与一个桌子打架，无论我试图减小哪个元素，桌子的宽度都保持不变，我无法减小它的大小。我使用萤火虫进行搜索，但找不到设置宽度过高的元素。

最后，我尝试更改输入文本元素的size属性并对其进行修复。由于某些原因，size属性会覆盖css的宽度。我使用jQuery将行动态添加到表中，而这些行包含输入。因此，当涉及到使用appendTo（）函数动态添加输入时，最好将size属性与width一起设置。

— 标记
source

1

如果使用宽度（第二个示例），则将获得更多的一致性。

— 马特·豪威尔
source

1

您可以使用样式和宽度来调整文本框的大小。这是它的代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>
<body>
<div align="center">

    <form method="post">
          <div class="w3-row w3-section">
            <div class="w3-rest" align = "center">
                <input name="lastName" type="text" id="myInput" style="width: 50%">
            </div>
        </div>
    </form>
</div>
</body>
</html>

展开摘要

使用对齐将文本框居中。

— h
source

1

无论是size在HTML属性和width在CSS属性将设置的宽度<input>。如果要将宽度设置为更接近每个字符的宽度，请使用如下**ch**单位：

input {
    width: 10ch;
}

— chrisbowman22
source

0

HTML控制元素的语义含义。CSS控制页面的布局/样式。在控制布局时使用CSS。

简而言之，永远不要使用size =“”

— 克里斯·索博列夫斯基（Chris Sobolewski）
source

大小在元素的含义中可以是固有的。例如，中间的首字母只有一个字符。名字OTOH没有固有的大小限制-除非您的数据库中有名字。

— derobert

4

@derobert：我可能会误会，但通常您表示使用maxlength属性输入[type = text | password]而不是使用size属性。

— Horst Gutmann

2

@Horst：好吧，我要用两者来表示中间的首字母（因为该限制对用户有意义），而数据库只用maxlength来限制一个。

— derobert