<label> 元素拆分为多行

Question

我的 ASP.NET 核心 MVC 项目中有一个 <label> 元素，它分成多行而不是显示在一行中。我检查了 google chrome 中的元素以查看正在应用什么 css。它是从我的 custom.css class 那里得到的。下面是我的 custom.css 文件。

body {
    padding: 1em;
    font-family: Arial, Arial, Helvetica, sans-serif;
}

h1{
    margin-top:0;
    color: navy;
}

label{
    display: inline-block;
    width = 50em;
    padding-right: 1em;
}

div{
    margin-bottom: 0.5em;
    column-width = 300px;
}

检查元素中的css如下。

我已经尝试更新代码中的 custom.css 文件，但它仍然以某种方式为 css 选择相同的值。尝试清理和重建代码。还是不行。但是，当我在 inspect 元素中取消 select 宽度属性（如下所示）时，它会按预期显示。我正在从 custom.css 文件中删除 width 属性，但它在运行期间仍然出现。

我无法解释为什么会发生这种情况以及如何在一行中获取标签。尝试在代码中更新 custom.css 文件，但更改根本没有反映出来。为什么会发生这种情况以及如何解决它。如果您对整个代码感兴趣 source code

Answer 1

您的源代码 link 无法正常工作，所以仅查看您的屏幕截图，我建议进行以下更改，看看是否对您有所帮助。

由于您使用的是标签而不是 class，其他 classes 或 id 选择器可能会应用于您的标签宽度，CSS 选择器特异性应用（或减少）按照以下顺序，

ID
class
标签

但不要为此目的使用 ID，因为将来很难覆盖它们，请改用 classes。

现在只需将标签的宽度设置为 100%，这样它将占用完整的 space 可用宽度，并添加 !important 使其成为可以覆盖任何内联的 high-priority 原点样式或其他覆盖 class 样式。

label {
  display: inline-block;
  width = 100% !important;
  padding-right: 1em;
}

<label> 元素拆分为多行

<label> element splits to multiple lines

html

css

asp.net-mvc

asp.net-core