Question

HTML新手并试图找出原因：

＆＃13;

.oaHeader{
  background: black;
  width: 100%;
  height: 100px;
  padding-right: 50px;
  padding-left: 50px;
}

.logo{
  height: 100px;
  width: 200px;
  background: red;
  display: inline-block;
}

.oaAccount{
  background: blue;
  display: inline-block;
  width: 200px;
  height: 50px;
  float: right;
}

＆＃13;

<!DOCTYPE html>
<html lang="de">

<head>
    <meta charset="utf-8">
</head>

<body>
  <div class="page-container">
    <div class="oaHeader">
      <div class="logo"></div>
      <div class="oaAccount"></div>
    </div>
  </div>
  </body>
</body>
</html>

＆＃13;

为什么右边的填充会被忽略？如何调整Page-Container以便这不会发生？我希望相应的方框进行调整。我知道这是一个基本问题，我知道一个可能的解决方案，但我想知道它为什么会发生。

Answer 1

填充不被忽略;它只是溢出所以你必须滚动才能看到它。从\[[^][]*\]移除width: 100%，它应该有效：

.oaHeader

.oaHeader{
  background: black;
  height: 100px;
  padding-right: 50px;
  padding-left: 50px;
}

.logo{
  height: 100px;
  width: 200px;
  background: red;
  display: inline-block;
}

.oaAccount{
  background: blue;
  display: inline-block;
  width: 200px;
  height: 50px;
  float: right;
}

Answer 2

默认情况下，除了任何宽度规范外，浏览器还会执行填充。因此，如果你有50px的任何一边的填充，加上100％的宽度，你基本上说你想要一个100％宽度的盒子，再加上100px。

box-sizing css属性可用于告诉浏览器填充在宽度规范内是否包含。为此，请将box-sizing: border-box添加到容器元素（带有填充的元素）上。

您可以在此处详细了解此媒体资源：http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

不用担心，一开始就抓住了大多数人，只是感谢自己在我们不再需要支持IE6的时代学习：）

Answer 3

为oaHeader添加box-sizing属性。这将把所有div包装在标题中。

box-sizing属性用于更改用于计算元素宽度和高度的默认CSS框模型。

.oaHeader{
  background: black;
  width: 100%;
  height: 100px;
  padding-right: 50px;
  padding-left: 50px;
  box-sizing:border-box;
}

.logo{
  height: 100px;
  width: 200px;
  background: red;
  display: inline-block;
}

.oaAccount{
  background: blue;
  display: inline-block;
  width: 200px;
  height: 50px;
  float: right;
}

  <div class="page-container">
    <div class="oaHeader">
      <div class="logo"></div>
      <div class="oaAccount"></div>
    </div>
  </div>

基本的HTML定位

3 个答案: