给定:
.meta-div {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
border-radius: 0.5em;
width: 15rem;
}
.outer-div {
overflow: hidden;
background-color: black;
color: white;
white-space: nowrap;
text-align: right;
margin-left: 20px;
}
.inner-div {
/* padding-left: 20px; */
float:right;
}
<div class="meta-div">
<div class="outer-div">
<div class="inner-div">
111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999
</div>
</div>
</div>
带有 JS Fiddle link .
我正在尝试向文本添加 margin-left
并生成以下输出:
我需要具有 float:right
属性,因为我要求溢出的文本位于文本框的左侧。
我在网上广泛搜索了这个问题,发现不能向 float div 添加 margin
属性,我应该添加到它的容器中,但我真的不确定我可以用什么技巧来模仿上面的图片。
我尝试创建其他子/外部 div(对于 inner-div
类)并传播 float
和 margin-left
的属性在它们之间,我还尝试添加一些相对/绝对属性,但都是徒劳的。我已经在这个问题上坚持了 6 个小时了。
有人有任何建议或想法吗?
最佳答案
您可以使用border-left
:
.meta-div {
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
border-radius: 0.5em;
width: 15rem;
}
.outer-div {
overflow: hidden;
background-color: black;
color: white;
white-space: nowrap;
text-align: right;
border-left:22px solid black;
}
.inner-div {
/* padding-left: 20px; */
float:right;
}
<div class="meta-div">
<div class="outer-div">
<div class="inner-div">
111 + 222 + 333 + 444 + 555 + 666 + 777 + 888 + 999
</div>
</div>
</div>
关于html - float 右 div 上的左边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68432038/