Question

我有一个div，里面有一些span标签，是input button的容器。现在我希望我的最后一个按钮总是float向右。有时容器div s width溢出（容器的宽度更像是最小宽度）。在FF中它与float:right的效果相当不错，但在IE8中它将它呈现在整个页面的右侧，而不是我的容器右侧。

如何浮动最后一个按钮（这是我的div容器右侧的“后退”按钮）所以： 1.它总是保持在右边（无论div的宽度是否为overflow n） 2.它适用于FF和IE8。 3.请注意，在FF中，第5个按钮变得更接近第4个到第4个第4个按钮。有没有其他方法可以做到这一点没有这个问题，或者我应该使用left属性来修复它？

以下是fiddle示例。（在IE8中查看）

总结：我希望float:right考虑容器div的宽度是否被拉伸。（如果在最后span之后拉伸点）

Answer 1

我找到了解决方案。我没有使用float: right但position:absolute和right:0与父容器的位置设置为relative具有相同的效果。

Answer 2

使用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"; }

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

Answer 3

确保你在你的CSS样式表中定义类占用的空间量以及你的heirarchy：

.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:;

用这些标签定义你的所有方面要注意，margin标签会将你所有的div移动到你的.hello_list上 }

我希望我帮助GL！=）

CSS float考虑容器的宽度拉伸

3 个答案: