当前位置: 首页 > 面试题库 >

输入大小与宽度

燕寒
2023-03-14
问题内容

要么

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

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

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


问题答案:

您可以同时使用。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>


 类似资料:
  • 问题内容: 我被分配编写一个程序,该程序读取一系列整数输入并打印-输入的最小和最大-以及偶数和奇数输入的数量 我想出了第一部分,但对如何使程序显示最大和最小感到困惑。到目前为止,这是我的代码。我怎样才能显示最小的输入呢? 问题答案: 最简单的解决方案是使用诸如和

  • 问题内容: 我有这个设置: HTML : CSS : 通过此设置,它可以在iPhone上运行,但不能在浏览器中运行。 是因为我已经在meta中,也许已经在? 问题答案: 我发现最好的方法是为较旧的浏览器编写默认CSS,因为较旧的浏览器包括5.5、6、7和8。无法读取@media。当我使用@media时,我会这样使用: 但是,您可以使用@media进行任何操作,这只是为所有浏览器构建样式时最适合我的

  • 在CS231n关于卷积神经网络的课程中,在ConvNet中注: > INPUT[32x32x3]将保存图像的原始像素值,在这种情况下是宽32、高32和具有三个颜色通道R、G、B的图像。 CONV层将计算连接到输入中局部区域的神经元的输出,每个神经元在其权重和输入卷中连接到的小区域之间计算一个点积。如果我们决定使用12个过滤器,这可能会导致体积,例如[32x32x12]。 从文档中,我了解到INPU

  • 问题内容: 这是我的代码,无法正常工作。HTML,JavaScript,PHP或CSS是否有其他方法来设置最小宽度? 我希望文本输入字段的宽度可以动态变化,以便输入字段可以围绕其内容流动。每个输入都有的内置填充,这是问题,第二个问题是根本无法处理输入。 如果我设置的宽度超出了整个程序的混乱,那么我需要的宽度是1px,仅在需要时才需要。 问题答案: 听起来您的期望是,根据文本框的内容将样式动态地应用

  • 问题内容: 我有以下脚本将CSV文件转换为XLSX文件,但是我的列大小非常狭窄。每次我必须用鼠标拖动它们以读取数据时。有人知道如何设置列宽吗? 这是我正在使用的代码。 问题答案: 您可以估计(或使用等宽字体)来实现此目的。假设数据是一个嵌套数组,例如[[‘a1’,’a2’],[‘b1’,’b2’]] 我们可以获取每一列中的最大字符数。然后设置宽度。宽度正好是等宽字体的宽度(如果至少未更改其他样式,

  • 问题内容: 再次更新: 我通过选择最上面的答案来结束这个问题,以防止人们在没有真正理解问题的情况下添加答案。实际上,如果不使用网格或添加额外的CSS,就无法通过内置功能来实现。例如,如果您要处理的元素需要超出简短的输入,但它们是“内置”的,则网格将无法很好地工作。如果这是一个问题,我建议使用额外的CSS类,你可以在BS3讨论找到这里。现在BS4已经发布,可以使用包含的大小调整样式来进行管理,因此不