1

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

我有以下代码：

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 会缩小，而不是像浮动一样宽？

感谢您的任何回答！

4

2 回答 2

0

change display:block to display:inline-block?

于 2012-04-12T14:10:02.370 回答
0

将您的范围更改为：

display: inline-block;

应该使它们彼此相邻。IE7 或更早版本不支持此功能，但如果这对您很重要，您可以这样做：

display: inline-block; *display: inline;

哦，移除留在跨度上的浮子。

于 2012-04-12T14:00:00.213 回答