输入大小与宽度

Question

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

要么

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

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

当然这取决于要求,但我很想知道人们如何决定以及基于什么.

Answer 1

你可以使用两者.css样式将覆盖size支持CSS的浏览器中的属性并使字段具有正确的宽度,对于那些不支持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>

Answer 2

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

Answer 3

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

width在px中设置的样式至少是一致的,模块大小调整问题.您可能还想在'em'中设置样式,如果您想要相对于字体调整它的大小(但是,除非您font明确设置输入的族和大小,否则这将是不一致的),或者如果您正在制作一个,则为'%'液体布局形式.无论哪种方式,样式表可能比内联style属性更可取.

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

Answer 4

我想说这违背了"传统智慧",但我通常更喜欢使用尺寸.造成这种情况的原因恰恰是许多人不这么说的原因:根据字体大小,字段的宽度因浏览器而异.具体来说,无论浏览器设置如何,它总是足以显示指定数量的字符.

例如,如果我有一个日期字段,我通常希望字段宽到足以显示8或10个字符(两个数字的月份和日期以及两个或四个数字年份,带分隔符).设置size属性基本上可以保证整个日期可见,浪费的空间最小.类似地,对于大多数数字 - 我知道预期值的范围,因此我将size属性设置为正确的位数,如果适用,还加上小数点.

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

当然,这种逻辑并不总是适用 - 例如,名称输入字段可以包含任意数量的字符.在这些情况下,我将回退到CSS宽度属性,通常是px.不过,我会说我让广大的领域有某种已知的内容,并通过指定大小的属性,我可以确保大部分的内容,在大多数情况下,是不削波显示.

Answer 5

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

input {
    width: 10ch;
}

Answer 6

我刚刚解决了一张桌子，无论我试图缩小哪个元素，我都无法缩小它，但桌子的宽度保持不变。我使用 firebug 进行搜索，但找不到将宽度设置得如此高的元素。

最后，我尝试更改输入文本元素的大小属性并修复它。出于某种原因，size 属性超过了 css 宽度。我使用 jQuery 将行动态添加到表中，这些行包含输入。因此，也许当涉及使用 appendTo() 函数动态添加输入时，最好将size 属性与宽度一起设置。