我试图表现出左,右和中心,但利润率不接受按钮。我不知道如何只对CSS的所有子html元素设定保证金。
.wrapper * {
position: fixed;
background-color: #ccc;
height: 60px;
padding: 10px;
bottom: 0;
left: 0;
width: 100%;
}
.wrapper>* {
color: green;
/* margin:12px*?
}
<div class="wrapper">
<button class="left">
Button 1
</button>
<button class="center">
Button 2
</button>
<button class="right">
Button 3
</button>
</div>
只需使用::ng-deep
申请样式的子元素。也改变了“左”和“右” bottons位置“相对”,并使用浮点值的那些按钮对齐左右...
.wrapper::ng-deep *{
margin:5px 8px 4px 2px;
text-align:center;
}
.left, .right{
position: relative;
}
.left{
float: left;
}
.right {
float: right;
}
现在检查:https://stackblitz.com/edit/amexio-breadcrumb-demo-v7dtrb?file=src/app/app.component.css。
希望这是你期待什么。
你不能被margin
ed,这是你的情况的元素使用position
。为了您的显示它的方式,我们可以更好地做到这一点的方法:
.wrapper {
position: absolute;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.left, .right {
position: absolute;
left: 0;
}
.right {
left: auto;
right: 0;
}
button {
background: #f90;
border: 1px solid #960;
padding: 10px;
cursor: pointer;
display: inline-block;
}
<div class="wrapper">
<button class="left">Button 1</button>
<button class="center">Button 2</button>
<button class="right">Button 3</button>
</div>
和上面的响应!检查出来全屏。
使用:: NG-深选择器选择被另一个组件内定义的元素。
为了您的例子:: NG深将让你在你的元素定义的利润,像这样:
.wrapper{
position: fixed;
background-color: #ccc;
height: 60px;
padding: 10px;
bottom: 0;
left: 0;
width: 100%;
}
.wrapper ::ng-deep button {
margin:0 20px;
}
或者,你可以把它们飘浮使用CSS-Flexbox的像这样均匀地定位:
.wrapper{
position:fixed;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color:#ccc;
height:60px;
padding:10px;
bottom:0;
left:0;
width:100%;
}
.wrapper ::ng-deep button{
margin: 0 10px;
flex: 1 1 auto;
}
也许你可以尝试设置wrapper
作为柔性容器,并证明其孩子到space-between
如果你想看到它在Stackblitz在此处与自己的角码校验:https://stackblitz.com/edit/amexio-breadcrumb-demo-m1c8xp
编辑:添加另一示例居中按钮
.wrapper {
display: flex;
position: fixed;
background-color: #ccc;
height: 60px;
padding: 10px;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
justify-content: space-between;
}
.wrapper * {
color: green;
/*flex: auto; Uncomment this if you want the buttons to span the full width of the container*/
}
.wrapper2 {
display: flex;
position: fixed;
background-color: #ccc;
height: 60px;
padding: 10px;
bottom: 100px;
left: 0;
right: 0;
max-width: 100%;
justify-content: center;
}
<div class="wrapper">
<button class="">
Button 1
</button>
<button class="">
Button 2
</button>
<button class="">
Button 3
</button>
</div>
<div class="wrapper2">
<button class="">
Button 1
</button>
<button class="">
Button 2
</button>
<button class="">
Button 3
</button>
</div>