在不改变秩序的情况下向右浮动，强行收缩

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正好像我想要的那样漂浮。问题是跨度拒绝排成一排。我看到以下内容：

红色是绝对div，蓝色是容器div，绿色是跨度。嗯，你看到我的问题..

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

那么如何在不更改任何订单且没有为容器div设置宽度的情况下解决这个问题呢？或者更确切地说，为什么容器div会根本缩小而不只是像浮子那样保持宽度？

感谢您的回答！

Answer 1

将您的范围更改为：

display: inline-block; 

应该让它们彼此相邻。 IE7或更早版本不支持此功能，如果这对您很重要，您可以执行此操作：

display: inline-block; *display: inline;

哦，然后移除跨度上留下的浮子。

Answer 2

更改显示：要显示的块：内联块？