问题
I need margin top,bottom,left,right of my all html components inside the ng-content.How to write the css for that? I tried but not working.Please help me to resolve this issue.
app.component.html:
<div class="wrapper"><ng-content></ng-content></div>
app.component.css:
.wrapper{
position:fixed;
background-color:#ccc;
height:60px;
padding:10px;
bottom:0;
left:0;
width:100%;
}
.wrapper:: ng-deep <ng-content>{
margin:5px 8px 4px 2px;
padding:0;
text-align:center;
}
回答1:
app.component.html
<div class="wrapper">
<button class="left">Left</button>
<button class="right">Right</button>
</div>
app.component.css
.left{
float:left;
}
.right{
float:right;
}
.center{
text-align: center;
}
.wrapper{
margin:15px 8px 4px 2px;
padding:0;
text-align:center;
width:100%;
height:60px;
}
You can add your HTML content inside <div class="wrapper"></div>
.
I hope you found this useful!!
EDIT
Change class to wrapper.
回答2:
The elements of ng-content`s are accessible from parent component. i.e. if you write in your app-component.html
<content>
<button class="left">Left</button>
<button class="right">Right</button>
</content>
and you use ng-content in your child component i.e.
<div class="wrapper">
<ng-content></ng-content>
</div>
Then you can access all of them from your app.component.css i.e.
.wrapper button {
margin:5px 8px 4px 2px;
padding:0;
text-align:center;
}
来源:https://stackoverflow.com/questions/54519145/how-to-set-css-margin-for-my-ng-content-all-child-html-elements