如何将 display inline-block 移动到右侧？

Question

我有一个div，它在display:inline-block中。我该如何将它向右移动？

<div style='width:100%'>
left

<div style='display:inline-block;position:relative;right:0px'>
right
</div>

</div>

https://jsfiddle.net/foreyez/y5dt2prj/

- Shai UI

Answer 1

您可以使用 Flexbox，并在内部div上设置 margin-left: auto 将其移动到右侧。

<div style='display:flex;'>
  left
  <div style='margin-left: auto;'>
    right
  </div>
</div>

- Nenad Vracar

---

这种方法可能存在的一个问题是，当“left”而不是一行中的文本更大时，将出现“right”div在顶部旁边显示而不是在文本末尾。 - yolisses

Answer 2

使用右浮动。这应该适用于您：

<div style='display:inline-block;position:relative;float:right;'>
right
</div>

- GunWanderer

---

在搜索了30分钟的网页后，float: right恰好解决了我的问题。对于我所做的事情来说，Flexbox太昂贵了，所以这是最好的答案。 - JCollier

Answer 3

一个简单的方法来定位inline-block元素是使用相对定位的方法，如下所示：

display: inline-block;
position: relative;
left: 100%;
transform: translateX(-100%);

- Geeky

Answer 4

样式="display: flex; flex-direction: row-reverse"

或者如果您使用Bootstrap：class="d-flex flex-row-reverse"

当我有一个带有溢出的跟随元素时，即滚动条打开时，这对我很有效。

- whittet