浮动右侧 div 上的左边距答案

【问题标题】：Left margin on a floating right div浮动右侧 div 上的左边距
【发布时间】：2021-09-26 14:50:02
【问题描述】：

给定：

.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 个小时。

有人有什么建议或想法吗？

【问题讨论】：

标签： html css css-float margin

【解决方案1】：

你可以使用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>

【讨论】：

太棒了！非常感谢，我会在 10 分钟内接受答复。