向左扩展 div 宽度以适应其内容

Question

我的结构是div:

img {
  width: 25px;
  height: 25px;
}

<div id="container">
  <span>Hello user</span>
  <span>
    <img src="https://en.opensuse.org/images/0/0b/Icon-user.png">
  </span>
  <span>Register</span> | 
  <span>Login</span>
</div>

我想要的是：当user的长度较长时，div容器必须将其宽度扩展到左方向（右方向固定）以适应其内容。
注意：这不是动画或过渡，用户是一个帐户。

Answer 1

将宽度自动设置为 div，它将自行重新排列以适合容器。

有多种方法可以使其向左扩展。您可以使用浮动或绝对定位。另一种方法是将父节点的 direction 设置为 rtl，然后在子节点上设置 ltr。

Answer 2

试试这个：

margin: auto;
float: right;

向左扩展 div 宽度以适应其内容

Expand div width to left direction to fit its content

html

javascript

css

frontend