Question

我需要为div元素menu设置填充，但我希望将其大小保持为其容器的10％。

从我的示例中可以看出，menu遍历包装器。

我想知道如何修复它，将menu保持在100％（我可以使用calc）以及为什么问题出在首位。感谢。

＆＃13;

#wrapper {
  width: 500px;
  height: 500px;
  background-color: red;
}

#menu {
  width: 100%;
  height: 50px;
  background-color: orange;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left:75px; // problem here
}
.item {
    width: 50px;
  height: 50px;
    background-color: gray;
}

＆＃13;

<div id="wrapper">
  <div id="menu">
    <div class="item">a
    </div>
    <div class="item">a
    </div>
    <div class="item">a
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以添加box-sizing属性。

默认值为content-box，其中仅包含元素width和height。 border-box还包含padding和border属性。

More information from MDN

说明我将其包含在代码段here中的方式。

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

#wrapper {
  width: 500px;
  height: 500px;
  background-color: red;
}

#menu {
  width: 100%;
  height: 50px;
  background-color: orange;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left:75px; // problem here
}
.item {
    width: 50px;
  height: 50px;
    background-color: gray;
}

<div id="wrapper">
  <div id="menu">
    <div class="item">a
    </div>
    <div class="item">a
    </div>
    <div class="item">a
    </div>
  </div>
</div>

padding更改已应用flex

1 个答案: