PrimeNG：如何将标签置于文本输入框上方？

你当前使用的p-float-label是PrimeNG的浮动标签组件，它的设计逻辑就是让标签默认叠加在输入框上，当输入框获得焦点或有内容时标签上浮，所以会出现你看到的叠加效果。要实现标签固定在输入框上方的常规布局，只需移除浮动标签容器，直接使用p-field的默认结构即可：

正确代码示例 #

<div class="ui-fluid" style="padding-top: 200px; padding-bottom: 200px;">
  <div class="p-field">
    <label for="nameInput">My Name</label>
    <input type="text" id="nameInput" formControlName="name" pInputText>
  </div>
</div>

关键修正点 #

• 移除span.p-float-label容器，PrimeNG的p-field类本身就会处理标签和输入框的垂直布局
• 确保label的for属性值和input的id属性值一致（你之前的for="formLogoId"和输入框的id不匹配，这也会导致标签关联失效）

你的angular.json样式配置是正确的，无需修改，Nova主题默认会给p-field下的标签和输入框添加上下排列的样式。

内容的提问来源于stack exchange，提问作者Dave