PrimeNG -p面板的造型尺寸和对齐
我正在使用PrimeNG p-panel组件创建一个登录页面：https://www.primefaces.org/primeng/#/panel
这个面板占据了屏幕的整行，但我想让整个面板的宽度达到30%左右，并且集中起来，这样我的面板中就不会有太多的空空间，因为我只有这两个字段和一个按钮。
我有以下一页：
login.componennt.html
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="text" pInputText placeholder="user" [(ngModel)]="user"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<input type="password" pPassword placeholder="password" [(ngModel)]="password"/>
</div>
</div>
<div class="ui-g">
<div class="ui-lg-2 ui-md-2 ui-sm-2">
<button pButton type="button" label="Login" (click)="doLogin()"></button>
</div>
</div>
</p-panel>所以我试了一下：
<p-panel header="Login" styleClass="center-div">
...login.component.css
.center-div {
width: 30%;
margin: 0 auto;
}这不起作用。
我的屏幕是这样的：
所以我检查了代码，Chrome开发工具，我得到了：
<p-panel _ngcontent-c1="" header="Login" styleclass="center-div" ng-reflect-header="Login" ng-reflect-style-class="center-div">
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">
<div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
<span class="ui-panel-title">Login</span>
</div>
<div class="ui-panel-content-wrapper" ng-reflect-klass="ui-panel-content-wrapper" ng-reflect-ng-class="[object Object]">
<div class="ui-panel-content ui-widget-content">
<div _ngcontent-c1="" class="ui-g">
<div _ngcontent-c1="" class="ui-lg-2 ui-md-2 ui-sm-2">
<input _ngcontent-c1="" pinputtext="" placeholder="user" type="text" class="ng-untouched ng-pristine ng-valid ui-inputtext ui-corner-all ui-state-default ui-widget">
</div>
</div> ...所以我可以看到我的css类‘center’在正确的位置，就在实际面板内容之前，但是为什么它不影响内容样式呢？这里：
<div class="center-div ui-panel ui-widget ui-widget-content ui-corner-all" ng-reflect-klass="center-div" ng-reflect-ng-class="ui-panel ui-widget ui-widget-c">因此，在Chrome工具中，如果我将用户界面面板类更改为
width: 30%;
margin: 0 auto;它确实有效，然后我得到了我想要的那一页：
因此，一个问题是，为什么我的中心-div类不影响内容，而ui面板影响？
那么css应该选择ui面板并在那里进行更改吗？我一直在努力，但我失败了。
有什么帮助吗？
干杯!
回答 2
Stack Overflow用户
发布于 2017-05-24 22:53:26
我放弃了试图影响PrimeNG css类的想法，所以我在div容器中添加了这个面板，这样我就可以影响该容器的行为，这样可以更好地工作。
因此，我创建了一个中心登录类，我还使用媒体查询来处理宽度和边距，以使其响应.以下是我所做的：
login.component.html
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12 center-login">
<p-panel header="Login">
<div class="ui-g">
<div class="ui-lg-12 ui-md-12 ui-sm-12">
<h4 class="first in-label">User</h4>
<input type="text" pInputText [(ngModel)]="user"/>
</div>
</div>
...login.component.css
@media screen and (min-width: 600px) {
.center-login {
width: 600px;
margin: 0 auto;
}
}所以当我的屏幕是600 at宽或更小时，我让它占用空间，但当屏幕变大时，我将它集中起来，并将宽度固定在600 at。
Stack Overflow用户
发布于 2018-10-26 13:59:42
您应该在CSS中使用下一个选择器。
.center-div.ui-panel{
width: 30%;
margin: 0 auto;
}https://stackoverflow.com/questions/44148075
复制相似问题
腾讯云开发者
