可调整大小的导航栏和按钮“a la”福布斯
可调整大小的导航栏和按钮“a la”福布斯
提问于 2014-01-29 20:37:14
我正在尝试重新创建福布斯网站上的导航栏：link here
导航栏中的按钮会自动调整大小，以始终覆盖窗口宽度的100%。
我尝试的方法是为header标签设置最小宽度和最大宽度，并为栏上的每个按钮设置最小宽度和最大宽度：
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;
}标题的大小可以在最小宽度和最大宽度之间正常调整。然而，我的按钮的宽度一点也没有改变。无论我当前的窗口有多大，它们的宽度都是固定的。
回答 2
Stack Overflow用户
发布于 2014-01-29 20:51:31
通过设置最小宽度和最大宽度，您只设置了按钮不能超过的宽度限制。尝试将按钮元素设置为块级("display: block;")，这样它们自然会覆盖其父容器的100%，但由于您的最小和最大宽度限制，请不要这样做。
或者(也是我首选的选项)，不设置最小宽度和最大宽度，而是将每个元素的宽度设置为百分比。例如(更改设计的宽度)：
header #Title {
width: 40%;
}
header #ButtonA,
header #ButtonB {
width: 30%;
}Stack Overflow用户
发布于 2014-01-29 20:59:32
百分比宽度基于父容器的宽度。在这种情况下，您希望按钮是全宽标题的百分比，因此解决方案是将按钮的宽度百分比设置为全宽的百分比。例如，如果你有5个按钮，那么每个按钮的宽度将是20% (100%的1/5)。
下面是一个包含此示例的CodePen：http://www.codepen.io/kyleatfine/pen/okxcz
您也可以考虑使用Flexbox布局来实现这一点。http://css-tricks.com/snippets/css/a-guide-to-flexbox/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21442107
复制相关文章
点击加载更多
相似问题
成员2:截断文本并添加省略号。
截断文本并添加省略号PHP SQL
有两个并排的文本块
两个块并排，并带有编织降价
如何与图像并排添加文本块并具有页边距
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
