CSS宽度x小于宽度？

【问题标题】：CSS width x less than width?CSS宽度x小于宽度？
【发布时间】：2012-08-27 07:45:54
【问题描述】：

我希望有一个位于页面顶部中心的导航栏，并且我希望其宽度比屏幕宽度小 80 像素。有没有办法用纯 CSS 做到这一点，没有 javascript？我以前见过这样做，但当时我没有费心去检查源代码。

【问题讨论】：

【解决方案1】：

只需在导航栏 div 上使用 margin-left: 40px 和 margin-right: 40px。

示例：

<html>
  <head></head>
  <body style='padding: 0; margin: 0;'>
    <div style='margin: 0 40px 0 40px; background-color:red;'>CONTENT YAY.</div>
  </body>
</html>

【讨论】：

【解决方案2】：

我知道这是一个非常老的问题，但如果我现在必须这样做，我会使用vh（视口高度）和vw（视口宽度）单位。它们类似于百分比单位，但基于视口大小。

width: 80vw

将您的容器宽度设置为 视口宽度的 80%。

【讨论】：