Html CSS背景图像的动态宽度

我在页面上设置了菜单栏，使用列表和CSS显示菜单元素。在菜单按钮的右边，在本例中是“Home”，我有一个空的bar元素，我想在关闭菜单栏宽度和结束元素之前将其扩展到页面的宽度。我尝试将宽度设置为100%，这会导致它断开到下一行，并填充页面的整个宽度，如下所示。关于如何使所有内容保持一致，并使空元素在宽度上具有动态性，有何想法

HTML：

<div>
   <li class="menu-home">
      <a href="#">&nbsp;</a>
   </li>
   <li class="menu-bar"> </li>
   <li class="menu-bar-right"> </li>
</div>

问题是：

---

您可以

将
的“home”和“right”分别浮动到
左侧和右侧
。任何出现在标记中
主视图和右侧
LIs
下方的
LIs
都将溢出到中心区域

如果知道主页按钮的宽度，可以使用
显示：内联块并给它一个等于该宽度的右边距（加上任何填充或空格等）

您知道按钮的宽度吗？
谢谢您的建议。我有按钮的宽度，但在某些情况下会添加更多的按钮。如果我显示的图像超过50个，图像会被分成多个页面，并添加一个“下一步”和“上一步”按钮，因此我确实希望宽度是动态的，这样就可以填充空间。如果是这样，我建议您查看Twitter引导（）。这正是你要找的。查看脚手架页面，重点关注流体布局。您还应该浏览一下其他功能，看看是否有任何功能是您将要尝试实现的—Bootstrap有一套非常好的jQuery插件，您可以添加这些插件。非常感谢您的建议。我已经实现了你的设计，现在所有的东西都显示在一行上，但是我的中心元素在左元素和右元素后面继续，所以圆角消失了。有没有办法让中间元素填充页面的宽度，而不是整个页面的宽度？我没有正确地实现“overflow:hidden；”。一旦我把这个添加到中心元素中，解决方案就起作用了——谢谢
li.menu-bar {
   position: static;
   float: left;
   list-style-type: none;
   background-image: url('top.png');
   border-style: none;
   border-width: 0px;
   padding: 0px;
   height: 34px;
   width: 100%;
}