简体繁体 English

导航栏背景填充屏幕宽度，而所有内容均在最小宽度和最大宽度值之内

[英]Navbar background filling screen width, whilst all content within min-width and max-width values

原文 2012-02-14 03:03:53 6 1 html/ css/ background/ width/ navbar

I'm creating a fluid website design and am specifying min-width and max-width values, however, I'd like the navigation bar background to extend from one side of the screen to the other (not be constrained by the max width), whilst keeping all of the <li> elements in it and all other screen content within the specified widths. 我正在创建流畅的网站设计并指定min-width和max-width值，但是，我希望导航栏背景从屏幕的一侧延伸到另一侧（不受最大宽度的限制），同时将所有<li>元素以及所有其他屏幕内容保持在指定宽度内。

Furthermore, I would also like to set a minimum margin for the page (eg 16px) so that there is always a gap between the content and the edge of the page. 此外，我还想为页面设置最小边距（例如16px），以便内容和页面边缘之间始终存在间隙。

Ideally as in the image below: 理想情况如下图所示：

What's the best way to go about containing everything inside the min-width and max-width values, whilst allowing the navbar background to stretch to the screen width. 在min-width和max-width值内包含所有内容的最佳方法是什么，同时允许导航栏背景拉伸到屏幕宽度。 Also, is there a way I can use margin-left: auto and yet keep a minimum margin value? 另外，有没有一种方法可以使用margin-left: auto并保持最小边距值？ Whenever I've tried to do this I can only get one or the other. 每当我尝试执行此操作时，我只能获得其中一个。

Thanks for any help in advance. 在此先感谢您的帮助。

1 个解决方案

有几种不同的方法可以做到这一点，但这个jsFiddle说明了我将如何做到这一点： http ： //jsfiddle.net/joshnh/UDwcp/

FLEXBOX min-width：min-content / max-width - FLEXBOX min-width: min-content / max-width

结合最小宽度和最大宽度 - Combining min-width and max-width

宽度，最小宽度和最大宽度的组合 - Combination of width, min-width and max-width

最小宽度，最大宽度css使用最小宽度 - Min-width, max-width css use smallest width

最小宽度和最大宽度问题。如何使内部内容随宽度增长 - min-width and max-width issues. How to get inner content to grow with width

最大宽度和最小宽度缩放，这可能吗？ - max-width and min-width scaling, is this possible?

如何防止最小宽度覆盖最大宽度？ - How to prevent min-width overriding max-width?

@media（最大宽度或最小宽度）用于视频 - @media (max-width or min-width) for video

最小宽度，最大宽度和缩小以适合父级 - Min-width, max-width, and shrinking to fit in parent

给出@media min-width或max-width的正确方法 - correct way of giving @media min-width or max-width

暂无

暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 FLEXBOX min-width：min-content / max-width - FLEXBOX min-width: min-content / max-width 结合最小宽度和最大宽度 - Combining min-width and max-width 宽度，最小宽度和最大宽度的组合 - Combination of width, min-width and max-width 最小宽度，最大宽度css使用最小宽度 - Min-width, max-width css use smallest width 最小宽度和最大宽度问题。如何使内部内容随宽度增长 - min-width and max-width issues. How to get inner content to grow with width 最大宽度和最小宽度缩放，这可能吗？ - max-width and min-width scaling, is this possible? 如何防止最小宽度覆盖最大宽度？ - How to prevent min-width overriding max-width? @media（最大宽度或最小宽度）用于视频 - @media (max-width or min-width) for video 最小宽度，最大宽度和缩小以适合父级 - Min-width, max-width, and shrinking to fit in parent 给出@media min-width或max-width的正确方法 - correct way of giving @media min-width or max-width

相关标签

粤ICP备18138465号 © 2020-2024 STACKOOM.COM