浮动右侧的左边距 div
Left margin on a floating right div
鉴于:
.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>
我正在尝试向文本添加 margin-left
并生成以下输出:
我需要 float:right
属性,因为我要求溢出的文本位于文本框的左侧。
我在网上广泛搜索了这个问题,发现不能将 margin
属性 添加到浮动 div,而我应该添加到它的容器中,但我真的不确定我可以用什么技巧来模仿上面的图片。
我尝试创建其他 sub/outer divs(对于 inner-div
class)并传播 float
和 margin-left
的属性在它们之间,我还尝试添加一些 relative/absolute
属性,但都是徒劳的。我已经坚持了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>
鉴于:
.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>
我正在尝试向文本添加 margin-left
并生成以下输出:
我需要 float:right
属性,因为我要求溢出的文本位于文本框的左侧。
我在网上广泛搜索了这个问题,发现不能将 margin
属性 添加到浮动 div,而我应该添加到它的容器中,但我真的不确定我可以用什么技巧来模仿上面的图片。
我尝试创建其他 sub/outer divs(对于 inner-div
class)并传播 float
和 margin-left
的属性在它们之间,我还尝试添加一些 relative/absolute
属性,但都是徒劳的。我已经坚持了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>