如何让primeNg将标签放置在输入文本字段的上方？

Question

我用的是角13和PrimeNG 13.4.1。我想让标签直接放在文本字段的上方，所以我创建了

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

但是，在呈现字段时，标签似乎叠加在文本输入上.

​

​

在文本字段上方定位标签的正确方法是什么？我把这个放在我的angular.json文件里，因为它值得.

        "styles": [
          "node_modules/primeng/resources/themes/nova/theme.css",
          "node_modules/primeng/resources/primeng.min.css",
          "node_modules/primeicons/primeicons.css"
        ],

Answer 1

基于附加的HTML，您正在应用浮标。

如果希望标签位于输入字段的顶部，可以参考InputText演示(无效部分)。

HTML

<div class="p-field">
    <label for="formLogoId">My Name</label>
    <input type="text" formControlName="name" pInputText />
</div>

CSS

.p-field > * {
  display: block;
}

CSS部分是至关重要的，元素中的所有元素与p-field类一起应用于样式：display: block。

没有它，<label>元素将位于左侧，<input>元素将位于右侧(位置)。

样本StackBlitz演示

输出

​

​

您可以考虑使用PrimeFlex，这是一个用于Prime的CSS库。

1. 安装primeflex库。

npm install primeflex

1. 在angular.json或根样式表中导入CSS。

"node_modules/primeflex/primeflex.css"

1. 应用PrimeFlex造型。

<div class="field">
    <label for="formLogoId">My Name</label>
    <input type="text" formControlName="name" pInputText class="w-full" />
</div>

参考：FormLayout

样本StackBlitz演示(PrimeFlex)