如何通过 CSS 增加输入文本元素的宽度？

Posted 2023-04-18

【中文标题】如何通过 CSS 增加输入文本元素的宽度？

【英文标题】：How can I increase input text elements' width via CSS?

【发布时间】：2015-10-22 06:04:45

【问题描述】：

出于对齐目的（我不能使用 html 表格，因为某些行需要比其他行更多的 td），我正在尝试对某些输入文本元素的宽度进行微观管理。

我有这个 HTML：

<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />

...正如您可能注意到的，它引用了这个 CSS 类：

.firstblockinut 
    width: 196px;

它什么都不做； travelername 的宽度始终保持不变 (169)。

但是，我可以通过这种方式在 jQuery 中完成它：

var travname = $('[id$=travelername]');
travname.width(196);

那么如何使用 HTML/CSS 完成 jQuery 中的简单操作？

【问题讨论】：

我在上面的 CSS 类声明中发现了一个拼写错误：firstblockinut (should be firstblockinput)

如果这只是发布问题时的拼写错误，请尝试将 !important 添加到 CSS 类中的宽度声明：firstblockinput。如果其他一些 CSS 规则超过了 width 属性的值，这将有所帮助。

【参考方案1】：

你这里有一个错字......在你的 CSS 中你有

.firstblockinut 
    width: 196px;

而在你的 HTML 中，你有

<input class="firstblockinput" type="text" id="travelername" title="Last Name, First Name, Middle Initial" />

注意 HTML 和 CSS 中的类名

在您的 CSS 中，您有 firstblockinut，而在 HTML 中，您有 firstblockinput。请注意缺少的 p。这就是 CSS 不适合你的原因。

【讨论】：

该死，我唯一忘记的拼写错误是“因纽特人”