占据整行的文本字段答案

【问题标题】：Text Field Taking Up Entire Row占据整行的文本字段
【发布时间】：2012-03-02 04:20:45
【问题描述】：

我有一个文本字段将整个水平距离扩展到我不想要的窗口。我试过以我能想到的任何方式限制大小：

<input class="searchField" id="searchBar" style="size:10;" type="text" size="10px" value="Search Here" />

使用 CSS：

#searchBar input
{
    width:10px;
}

.searchField 
{
    size:10px;
}

很可能是其他 HTML/CSS 代码导致它一路扩展。我的问题：有没有办法覆盖它，以便在本地输入文本字段中，我可以有自己的大小，比如 10 像素？

【问题讨论】：

标签： css html

【解决方案1】：

如果它在其他地方使用不同的宽度属性，请使用

.searchField { width:10px !important; }

【讨论】：

【解决方案2】：

更改width 属性。

#searchBar { 
  width: 10px; 
}

【讨论】：

【解决方案3】：

尝试使用宽度 css 属性。

.searchField 
{
     max-width: 10px;
}

【讨论】：

【解决方案4】：

我从未听说过size CSS 属性。你是说width（比如width: 10px）吗？

【讨论】：

【解决方案5】：

'size' 是无效的 CSS 属性。改用宽度。例如，给你的输入一个 100px 的宽度，10px 太小了。您可能还想看看Input size vs width

【讨论】：