1

首先，这是我的HTML 

<div class="header">
  <div class="wrapper">
    <div class="navi">
      <a href="#" class="logo">Logo</a>
      <ul><!--
        --><li><a href="#" class="navlink">Link 1</a></li><!--
        --><li><a href="#" class="navlink">Link 2</a></li><!--
      --></ul>
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="content">
    <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  </div>
</div>

和CSS 

.wrapper {
    width: 90%;
    max-width: 50em;
    margin: 0 auto;
}

.header,
.navi {
    width: 100%;
}

.header {
    background: grey;
}

.navi {
    background: green;
    display: table;
    text-align: center;
}

.navi ul {
    display: table-cell;
    vertical-align: middle;
    text-align: right;
}

.navi li {
    background: orange;
    display: inline;
    margin-left: 10px;
}

.navilink {
    display: inline-block;
    width: auto;
}

.logo {
    background: red;
    float: left;
}

.content {
    width: 100%;
    background: fuchsia;
}

小提琴
全屏小提琴

您会看到，包装器确保内容和视口边缘之间始终存在某种间隙，并且超过某个点（50 em），.wrapper不会超过任何进一步。

我在这里发布的代码有效，但我想知道是否有机会摆脱<div class="wrapper">实现相同的结果。我已经尝试将.wrapper类直接应用于元素，但这不起作用 - 为什么？

澄清一下：我的目标是使标记更清晰。这就是为什么我对解决方案感兴趣，然后确保元素的行为与我发布的示例中的一样，但不使用<div class="wrapper">. 当然，课程.wrapper必须保持不变，只是让div我印象深刻。这就是为什么我尝试.wrapper直接添加到元素中。

4

1 回答 1

1

移除包装器 div，并将两个 CSS 属性添加到内容 div..

.content { 
margin: 0 auto;
max-width: 50em;
}
于 2013-02-07T16:21:05.597 回答