给定:
.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
属性,因为我要求溢出的文本位于文本框的左侧。
我在网上广泛搜索了这个问题,发现不能将 margin
属性添加到浮动 div,而我应该添加到它的容器中,但我真的不确定我是什么技巧可以用来模仿上图。
我尝试创建其他子/外部 div(用于 inner-div
类)并在它们之间传播 float
和 margin-left
的属性,我还尝试添加一些 relative/absolute
属性,但都是徒劳的。我已经坚持了 6 个小时。
有人有任何提示或想法吗?
答案 0 :(得分:3)
您可以使用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>