我在容器中有两个正方形,它们使用transform:translate重叠,我想删除蓝色正方形右侧的填充,以使容器完全适合孩子的宽度。请参阅图片进行说明。
我尝试将容器的大小调整为90px
,该宽度应为子项(50px + 50px - 10px)
的宽度,但是当我这样做时,蓝色框将移至下一行。为什么这样做呢?我也尝试应用padding-right: 0
,但没有任何改变。
.container {
width: 110px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
我希望没有左右填充。
答案 0 :(得分:0)
将position: absolute
与top
和left
/ right
一起使用,不要忘记容器上的position: relative
:
.container{
width: 90px;
border: 1px solid black;
padding-right: 0;
position: relative;
}
.box{
height: 50px;
width: 50px;
display: inline-block;
}
.one{
background: red;
}
.two{
background: blue;
position: absolute;
left: 40px;
top: 15%;
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>
答案 1 :(得分:0)
只需在第二个正方形上添加一个负的边距右边
.container {
width: 94px;
height: 57px;
border: 1px solid black;
}
.box {
height: 50px;
width: 50px;
display: inline-block;
}
.one {
background: red;
}
.two {
background: blue;
margin-right: -10px;
transform: translate(-10px, 15%);
}
<div class="container">
<div class="box one"></div>
<div class="box two"></div>
</div>