Question

我正在尝试设置一个简单的标题，以便在重新调整浏览器大小时，左/右填充可使标题内容远离窗口边缘。这适用于左侧，但在右侧，填充似乎崩溃，内容部分模糊。

这是我的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

Answer 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

Answer 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

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

2 个答案: