浏览器调整大小时标题导航填充折叠答案

【问题标题】：Header navigation padding collapses when browser resized浏览器调整大小时标题导航填充折叠
【发布时间】：2015-01-13 20:28:49
【问题描述】：

我正在尝试设置一个简单的标题，以便在调整浏览器大小时左/右填充使标题内容远离窗口边缘。这对左侧效果很好，但在右侧，填充似乎塌陷并且内容被部分遮挡。

这是我的 HTML：

<header id="header-container">
  <div class="header-table-wrap">
    <div class="header-table">
      <div class="nav-wrap header-table-cell cell1">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
      <div class="nav-wrap header-table-cell cell2">
        <nav class="navigation">NAV CONTAINER</nav>
      </div>
    </div>
  </div>
</header>

还有 CSS：

body {margin:0;}

.cell2 {text-align:right}
.header-table-wrap { background-color: orange; }
.header-table { background-color: yellow;}
.header-table-cell { background-color: #bbb; }

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

.header-table-cell {
  display: table-cell;
  vertical-align: top;
}

.nav-wrap { padding: 20px 0; }

我也在 codepen 上设置了标题：http://codepen.io/dgwyer/pen/ByWNYZ

【问题讨论】：

标签： css menu margin padding

【解决方案1】：

Demo

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing:border-box; /* add this (box-model)*/
}

有关box-sizing的更多信息，请参阅css-tricks

【讨论】：

感谢您的快速回复。只是出于好奇，是否可以在不使用 box-sizing 规则的情况下做到这一点？

【解决方案2】：

在表头上设置 box-sizing:border-box;

CSS

.header-table {
  display: table;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

DEMO HERE

【讨论】：