CSS背景图像的动态宽度

Question

我在页面上使用list和CSS设置菜单栏以显示菜单元素。在菜单按钮的右侧，在本例中为“Home”，我有一个空的栏元素，我希望在关闭菜单栏宽度结束元素之前扩展到页面的宽度。我试图将宽度设置为100％，这会导致它突破到下一行并填充页面的整个宽度，如下所示。有关如何将所有内容保持在同一行并且空元素在宽度上是动态的任何想法？

HTML：

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

CSS：

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%;
}

问题：

Answer 1

您可以分别float 'home' and 'right' LI到left and right。标记中LIs home and right下方显示的任何LIs都会泄漏到中心区域。

http://jsfiddle.net/gwmFk/1/

Answer 2

如果您知道主页按钮的宽度，可以在栏的其余部分使用display: inline-block;，并为其赋予右边距等于该宽度（加上任何填充或空格等）

你知道按钮的宽度吗？