我正在尝试制作一个左侧有x个未知宽度按钮的水平导航栏,右侧有一个150px宽的图像,按钮和上限之间的空间占用100个屏幕宽度的百分比。我不擅长CSS而且我一直在使用div,表,无序列表和三者的组合来进行不同的设置,并且无法使其正常工作。我现在尝试在ascii中绘制它:
<----Button1----><-Button2-><---------------Spacer-----------><!Cap:150px!>
因此,屏幕左侧的按钮会缩小以适应文本内容,上限将在屏幕的右侧上方,并且间隔符将扩展/收缩以使整个装配填充100%的屏幕。图像是PNG,具有一定的透明度,因此图像不能重叠。
感谢您的帮助。
答案 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并且内容将显示在其上方,从而有效地执行相同的操作。