How to set css margin for my ng-content all child html elements?

你。 提交于 2020-01-06 05:18:04

问题



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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!