html - CSS 背景图片的动态宽度

Question

我的页面上有设置菜单栏，使用列表和 CSS 来显示菜单元素。在菜单按钮的右侧，在本例中为“主页”，我有一个空栏元素，我想在关闭菜单栏宽度结束元素之前将其扩展到页面的宽度。我试图将宽度设置为 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;在栏的其余部分使用，并给它一个等于该宽度的右边距（加上任何填充或空间等）

你知道按钮的宽度吗？