Question

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

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

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

感谢您的帮助。

Answer 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并且内容将显示在其上方，从而有效地执行相同的操作。

CSS水平导航，动态宽度按钮，100％宽度，Img背景

1 个答案: