html - 可调整大小的导航栏和按钮 'a la' Forbes

Question

我正在尝试重新创建福布斯网站上的导航栏: link here

导航栏中的按钮会自行调整大小以始终覆盖 100% 的窗口宽度。

我尝试过的方法是为标题标签设置最小和最大宽度，并为栏上的每个按钮设置最小和最大宽度:

header {
    min-width: 800px;
    max-width: 100%;
    background-color: gray;
}

header #Title {
    min-width: 200px;
    max-width: 200px;
    background-color: blue;
}

header #ButtonA {
    min-width: 120px;
    max-width: 200px;
    background-color: blue;
}

header #ButtonB {
    min-width: 120px;
    max-width: 200px;
    background-color: blue;
}

页眉在最小和最大宽度之间调整大小。但是我的按钮的宽度根本没有改变。无论我当前的窗口有多大，它们都是固定宽度的。

Answer 1

通过设置最小和最大宽度，您只是在设置按钮不能超过的宽度限制。尝试使按钮元素成为 block 级(“显示: block ；”)，这样它们自然会跨越 100% 的父容器，但不要因为您的最小和最大宽度限制。

或者(也是我的首选选项)，不设置最小宽度和最大宽度，而是将每个元素的宽度设置为百分比。例如(更改设计的宽度):

header #Title {
    width: 40%;
}

header #ButtonA,
header #ButtonB {
    width: 30%;
}