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

通过设置最小和最大宽度，您只能设置按钮不能超过的宽度限制。尝试使按钮元素块级（“display：block;”），以便它们自然地跨越其父容器的100％，但不要因为你的最小和最大宽度限制。

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

header #Title {
    width: 40%;
}

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

Answer 2

百分比宽度基于父容器的宽度。在这种情况下，您希望按钮是全宽标题的百分比，因此解决方案是将按钮的宽度百分比设置为整个宽度的百分比。例如，如果您有5个按钮，则每个按钮的宽度将为20％（100％的1/5）。

以下是CodePen的示例：http://www.codepen.io/kyleatfine/pen/okxcz

您也可以考虑使用Flexbox布局来实现此目的。 http://css-tricks.com/snippets/css/a-guide-to-flexbox/

可调整大小的导航栏和按钮'a''福布斯

2 个答案: