.container {
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>我知道这个设计很愚蠢而且很容易制作，
但我想用它如何我，我可以让学习.letter位置一样的首字母使用position: absolute; left:0; top: 0;，
我只想把它放在中间的左边，没有填充、间距或边距。
类似vertical-align: middle; text-align: left;但具有完全没有间距的绝对位置的效果。
但是在添加后，它会继续将所有字母移动到自身上方的页面左侧而不是父元素本身 left: 0;
我怎样才能做到这一点？
你可以添加position:relative到.container
.container {
position: relative;
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句