CSS浮动考虑容器的宽度拉伸答案

【问题标题】：CSS float consider container's width stretchCSS浮动考虑容器的宽度拉伸
【发布时间】：2012-03-08 22:29:15
【问题描述】：

我有一个div，里面有一些span标签，这些标签是inputbuttons的容器。现在我希望我的最后一个按钮总是float 在右边。有时容器 divs width 会溢出（容器的宽度更像是最小宽度）。在 FF 中，float:right 几乎可以很好地工作，但在 IE8 中，它会将其呈现在整个页面的右侧，而不是容器的右侧。

我怎样才能浮动最后一个按钮（这是我的div 容器右侧的“返回”按钮）所以： 1.它会一直停留在右边（不管div的宽度是不是overflown） 2. FF 和 IE8 都可以。 3. 请注意，在 FF 中，第 5 个按钮被渲染得更接近第 4 个，而不是第 4 个到第 3 个。是否有另一种没有此问题的方法，或者我应该只使用left 属性来修复它？

这是一个示例 fiddle 。（在 IE8 中查看）

总结：我想让float:right考虑容器divs的宽度是否被拉伸。（如果在最后一个 span 之后拉伸点）

【问题讨论】：

标签： css internet-explorer internet-explorer-8 css-float

【解决方案1】：

使用 ul 标签并创建一个列表，然后使用 css 来定义它像这样浮动的方式

<html>
<div class="hello_list">
<ul>

<li><a"put a link attribute here or an anchor">hello 1</a></li>
<li><a"put a link attribute here or an anchor">hello 1</a></li>
<li><a"put a link attribute here or an anchor">hello 1</a></li>

</ul>
</div>
</html>

然后在你的css样式表中这样做

html{  }
body{  }

ul{  }
ul li{ float:left;}
ul li a{ color:"put a color here"; }
ul li a:visited{ color:"put a color here";}
ul li a:hover{ color:"put a color here"; }
ul li a:active{color:"put a color here"; }

并检查您的层次结构，从长远来看，这将有助于使其尽可能简单。

【讨论】：

感谢您的回答...我看不到最后一个按钮是如何始终向右浮动的？
确保在您的 CSS 样式表中定义类占用的空间量以及您的层次结构：1 sec ill post is in a regular awnser

【解决方案2】：

请确保您在 CSS 样式表中定义类占用的空间量，如下所示：

.hello_list<------use an underscore for all spaces in class names some browsers dont like spaces also do this with your file names for all links.
{
width:"define you width in pixels here"
height:"define your height here"
padding-right:;
padding-left:;
padding-top:;
padding-bottom:;
margin-left:;
margin-right:;

用这些标签定义你所有的边注意边距标签会将你所有的 div 移动到不仅仅是你的 .hello_list }

我希望我帮助了 GL！=)

【讨论】：

不幸的是，这没有帮助。我不明白最后一个
是如何向右浮动的。此外，我不使用
和
而是使用
和 .

【解决方案3】：

我找到了解决办法。我没有使用float: right，而是使用position:absolute 和right:0，这与将父容器的位置设置为relative 具有相同的效果。

【讨论】：