CSS水平导航,动态宽度按钮,100%宽度,Img背景

时间:2009-10-01 00:42:27

标签: css

我正在尝试制作一个左侧有x个未知宽度按钮的水平导航栏,右侧有一个150px宽的图像,按钮和上限之间的空间占用100个屏幕宽度的百分比。我不擅长CSS而且我一直在使用div,表,无序列表和三者的组合来进行不同的设置,并且无法使其正常工作。我现在尝试在ascii中绘制它:

<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>

因此,屏幕左侧的按钮会缩小以适应文本内容,上限将在屏幕的右侧上方,并且间隔符将扩展/收缩以使整个装配填充100%的屏幕。图像是PNG,具有一定的透明度,因此图像不能重叠。

感谢您的帮助。

1 个答案:

答案 0 :(得分:1)

最简单的解决方案:

<div id="nav">
  <button type="button">One</button>
  <button type="button">Two</button>
  <button type="button">Three</button>
  <div id="cap">Cap</div>
</div>

使用:

#nav { overflow: hidden; }
#nav button { float: left; }
#cap { float: right; width: 150px; }

不需要垫片,因为div无论如何都是100%宽度(除非其他CSS改变了)。除非您需要特定的间隔样式或者还有其他原因需要它。如果它只是一个样式问题,则将样式应用于外部导航div并且内容将显示在其上方,从而有效地执行相同的操作。