填充由不均匀尺寸的浮动元素留下的空间

Question

我正在尝试创建一个菜单，它是li中一系列浮动的ul。它们受到外部容器的约束，最大宽度为700px。 li具有可变宽度，因为它们根据其内容调整大小。每个li也都有背景颜色，使效果看起来像条形和边框的右下角，以便将它们与其他项目分开。

漂浮和包装工作正常。我想要做的是填写下一个项目不适合的行末的“间隙”，然后将其包裹起来。我希望它基本上填充一个空盒子（所以相同的背景颜色和相同的边框将它分开），使其拉伸到约束的700px宽度。

我玩弄了背景图片。但是我有一个问题，即在IE中浮动到下一行的元素高一个像素，因此当它延伸到多行时，由框颜色和底部边框组成的背景图像不能正常工作。

使用纯色背景意味着当它位于第二行时，填充的空格在第一行和第二行之间没有分隔行。

我创造了一个小提琴来演示情况并允许你玩它：http://jsfiddle.net/chrisvenus/yR9dJ/。基本上在那个演示中我需要整个红色虚线框用蓝色背景颜色填充并保持分隔线。

我完全可以控制更改HTML，但我希望避免回到表格设计，但我很乐意做出适当的其他修改。

在第一行完美地拉伸物品以填充空间是可以接受的，但是如果一个物品落到第二行，我认为它看起来不会很好地拉伸到全宽。

我宁愿避免使用javascript解决方案，但如果这是我肯定会考虑的唯一选择。

为了让结果更清楚，我希望最终的结果是：

这是当我尝试使用背景图像并演示上面提到的问题时，第二行比第一行高1px。由于FF具有相同的尺寸，因此在这方面效果不佳。

Answer 1

我做了一些实验，然后我来到了这个小提琴： http://jsfiddle.net/jJwTL/

我在Fx10，IE8和Chrome上测试了1行或更多行。我使用display: inline-block而不是浮动，它似乎运作良好

CSS

ul { 
  width          : 700px; 
  background     : #5ca7be; 
  overflow       : hidden;
  border         : 2px solid #848484; 
}
ul:after { display: block; margin-top: -3px; content: ""; }

li { 
  display     : inline-block; 
  position    : relative; 
  height      : 2em; line-height: 2em; 
  padding     : 0 12px;
  margin-top  : -2px;  
  color: #fff; border-right: 2px #fff solid; 
}


li:first-child { margin-bottom: 2px; }

li:before  {
    content   : ""; 
    position  : absolute; 
    left      : 0;
    top       : 0;
    display   : block; 
    width     : 700px; 
    height    : 2px; 
    background: #fff;
}

由于我使用了psuedolements，因此这个例子不适用于IE＆lt; 8。希望这无论如何都有帮助

Answer 2

这是更新的CSS

.Menu {
  float: left;
  margin: 0;
  margin-bottom: 2em;
  width: 700px;
  border: 1px dashed red;
    `background-color:blue;`
    padding:10px;
}

.HorizontalMenu .MenuItem {
  display: inline-block;
  padding: 0.15em 1.5em;
  color: white;
    `border:solid 2px blue;`
  text-decoration: none;
}