html - 不改变顺序向右浮动，强制收缩

Question

这个问题可能很容易解决，但我不确定我做错了什么。

我有以下代码:

HTML:

<div class='absolute'>
   <div class='container'>
      <span>blabla</span>
      unknown number of spans..
   </div>
</div>

CSS:

.absolute{
    position: absolute;
    bottom: 0px;
    right: 0px;
}
.container{
    float: right;
}
span{
    display:block;
    float: left;
}

基本上我想要的是在右下角将所有跨度都排成一条直线。绝对 div 完美运行，容器 div 完全按照我想要的方式 float 。问题是跨度拒绝排成一排。我得到以下外观:

红色是绝对 div，蓝色是容器 div，绿色是 span。那么你看到我的问题..

我试图给容器 div 一个宽度。这会产生一条直线水平线，就像我想要的那样，除了跨度向左浮动至蓝色容器 div 的宽度。而且我无法计算宽度，因为我不知道跨度数。

那么如何在不更改任何顺序且不为容器 div 设置宽度的情况下解决这个问题呢？或者更确切地说，为什么容器 div 会缩小而不只是保持 float 所需的宽度？

感谢您的回答!

Answer 1

将显示: block 更改为显示:内联 block ？