CSS背景图像的动态宽度

我在我的页面上使用列表和CSS来设置菜单栏来显示菜单元素。在菜单按钮的右侧，在这里是“Home”，我有一个空的栏元素，我想扩展到页面的宽度，然后关闭菜单栏宽度的结束元素。我试图将宽度设置为100％，这会导致它打破下一行并填充页面的整个宽度，如下所示。任何想法，我如何保持在同一行上的所有东西，并有空元素宽度动态？CSS背景图像的动态宽度

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

问题：

enter image description here

来源

2012-07-28 Peter Larsen

可以float的'home' and 'right' LIS到left and right，分别。出现在标记中的home and rightLIs下方的任何LIs都会溢出到中心区域。

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

来源

2012-07-28 17:56:49

非常感谢您的建议。我已经实现了你的设计，现在所有东西都显示在一行上，但是我的中心元素在左右元素的后面，所以圆角正在消失。任何方式来让中心元素填充页面之间的空间而不是整个页面的宽度？ – 2012-07-29 19:48:59

我没有实现“overflow：hidden;”正确。一旦我将此添加到解决方案的中心元素 - 谢谢 – 2012-07-30 16:50:36

如果你知道你的home键的宽度，你可以在酒吧的休息使用display: inline-block;并给它一个合适的利润等于宽度（以及任何填充或空间等）

你知道按钮的宽度吗？

来源

2012-07-28 19:22:06

谢谢您的建议。我有这个按钮的宽度，但是在某些情况下会增加更多的按钮。如果我显示的图像超过50张，图像被分割为多个页面，并添加了下一个和后退按钮，所以我真的希望宽度是动态的，所以它只会填充空间 – 2012-07-29 19:07:47

如果是这样的话，我建议你看看Twitter Bootstrap（http://twitter.github.com/bootstrap/scaffolding.html）。这正是你要找的。查看脚手架页面并关注流体布局。你还应该看看其他特性，看看它们中的任何一个是你将要实现的东西--Bootstrap有一套很棒的jQuery插件，你可以添加它们。 – 2012-07-30 11:01:11

CSS背景图像的动态宽度

回答

相关问题