为什么 HTML 选择组件宽度在选择时会调整大小？

Question

我正在使用 ASP .NET Core 和 Razor 页面开发应用程序。在一页上，我有一些简单的下拉列表，其中只有两个元素，我希望将其宽度设置为仅容纳最大的元素，而不是更大的元素，我已使用 max-width 属性设置了它们。当我单击其中一个选定组件时，它会扩展为比我设置的值更宽，并在获得焦点时保持这种状态。当它失去焦点时，它会恢复到我想要的大小。选择组件的定义如下（它位于表内）：    <tr>        <td>            <div>                <label>Order: </label>                <select name="tenseorder" class="selectA" asp-items="@Model.tenseorder" asp-for="@Model.seltenseorder"></select>            </div>        </td>    </tr>创建的下拉列表中的值列出如下：    public List<SelectListItem> tenseorder                          // What order does the user want to practice in?        {            get            {                return new List<SelectListItem>                {                    new SelectListItem { Value = Convert.ToString(0, CultureInfo.InvariantCulture), Text = "sequential" },                    new SelectListItem { Value = Convert.ToString(1, CultureInfo.InvariantCulture), Text = "random"                 }            };        }    }CSS 看起来像这样（除了 max-width 参数，CSS 文件中的所有内容都是我从所做的研究中尝试过的修复）：/* Drop-down lists */    .selectA {        max-width: 110px;        padding: 0px;        margin: 0px;        display: inline-block;        vertical-align: top;        overflow-y:hidden;        white-space: normal;    }    .selectA select:focus {        max-width: 110px;        padding: 0px;        margin: 0px;        display: inline-block;        vertical-align: top;        overflow-y: hidden;        white-space: normal;    }下面的屏幕截图显示了页面上选择的组件所发生的情况 - 您可以看到所选的左侧组件比其他两个组件更宽：我已经阅读了很多关于重新调整选择组件大小的答案以及很多关于 css 语法的答案，正如你从上面的 css 中看到的，我已经尝试了很多这些，例如此处、此处、此处、此处和此处 ，但到目前为止还没有任何效果。我对此和自学非常陌生，所以假设我遗漏了一些明显的东西。谁能告诉我如何配置选择组件，使其在选择时不会改变宽度？

Answer 1

css 样式可以是页面视图上给定 html 的内部样式，也可以是文件 site.css 中的外部样式，该文件对于项目来说是全局的。内部样式优先于外部样式，在我的例子中，内部样式优先于对 site.css 文件的更改。因此，对 site.css 的任何更改都不会反映在页面的 Web 视图中。