具有基于%的宽度和基于px的边框的浮动元素:避免换行的最佳方法是什么？

Question

我有一个问题,在我的睡眠中无情地恐吓我.如果你有一个可以达到的解决方案并且小心分享它,请做; 我想再度一个正常的睡眠之夜.

在我的最新项目中,有多次我需要将4或5个元素彼此相邻浮动.每个元素的大小必须使用百分比(%),但也必须具有border-right: 1px solid #000.

曾几何时,我通常会使用百分比调整每个元素的大小,然后创建一个子元素,该子元素具有父级可能应具有的所有样式属性,包括border-right.但是,这种解决方案并不理想,因为它涉及大量不必要的标记.

然后一位同事指导我另一个解决方案.当元素的宽度使用%s调整大小并且还需要时border-right: 1px solid #000,请将其应用margin-right: -1px为偏移量.虽然它有效,但它为我创造了另一个问题(这就是为什么我们在这里,在一起,联合).

当在任何主要浏览器(ctrl mousescroll,ctrl - )中缩小时,作为讨论焦点的浮动元素倾向于跳舞一下; 最后一个元素在中断到下一行之间切换,然后再回弹.请参考下图:

应该解决这个问题的原因是因为项目的范围有可能为来自不同人口统计的人们提供服务(特别是那些可能需要滚动或者向外滚动以使文本更大或更小的人).确实是一个非常广泛的项目.

如何达到上述示例中突出显示的目标？如何将4个或5个或更多(或更少)的边界元素相互浮动,按比例使用%s进行大小调整,而不会破坏形式？

Answer 1

您可以使用实验框模型CSS3声明使边框减少元素宽度而不是添加到它.这应该可以防止这个问题.Quirksmode有一个很好的写作.IE8/9和当前版本的webkit,opera和ff支持它.

li {
   -webkit-box-sizing:  border-box;
   -moz-box-sizing:  border-box;
   box-sizing:  border-box;
}