时间戳

首页 > 解决方案 > 为什么是

css - 为什么是
    填充设置为零时开箱即用？

问题描述

这个容器是使用嵌套的 flexbox 排列的。当我添加一个零填充的无序列表时，它超出了子容器。不仅如此，它还超出了父容器。

:root {
  --main-bg-color: #3D3E5D;
  --bg-color-red: #F06D4F;
  --bg-color-aqua: #2DA6A4;
  --bg-color-orange: #EFB85E;
  --txt-color-primary: black;
  --txt-color-secondary: white;
  --heading: 3rem;
  --sub-heading: 2rem;
  --normal: 1rem;
  --small: 0.5rem;
  --main-padding: 10px;
}

* {
  margin: none;
  padding: 0;
  box-sizing: border-box;
}

.container__main {
  width: 90%;
  margin: auto;
}

.container__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex__box {
  font-weight: 900;
  font-size: var(--normal);
  background-color: aqua;
  flex: 0 0 calc(50% - 10px);
}

.red {
  background-color: red;
}

.gray {
  background-color: gray;
}

.container__main>.container__flex {
  margin-bottom: 10px;
}

.container__flex>.flex__box {
  padding: var(--main-padding);
}

.p-0 {
  padding: 0 !important;
}
<div class="container__main">
  <div class="container__flex">
    <div class="flex__box">
      <b></b>
      <span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
    </div>
    <div class="flex__box gray">
      <div class="container__flex">
        <div class="flex__box p-0 red">
          <span class="sub-heading">Links</span>

          <ul>
            <li>Chubkins</li>
            <li>W3 Schools</li>
            <li>Learn Web Dev</li>
            <li>Colour Reference</li>
          </ul>


        </div>
        <div class="flex__box p-0 red">

        </div>
      </div>

    </div>
  </div>
  <div class="container__flex">
    <div class='flex__box'>
      box1
    </div>
    <div class='flex__box'>
      box2
    </div>
  </div>
</div>

上述问题的图片：https ://prnt.sc/plgv0y

如果您想帮助我调试此视图此代码笔链接： https ://codepen.io/bishant-bhattarai/pen/qBBqqYE

由于这是一个小项目，我没有添加任何评论，对不起。

标签： cssflexboxhtml-lists

解决方案

这可能是由于 CSS 属性的默认值list-style-position。您可以尝试像这样更改它：

:root {
  --main-bg-color: #3D3E5D;
  --bg-color-red: #F06D4F;
  --bg-color-aqua: #2DA6A4;
  --bg-color-orange: #EFB85E;
  --txt-color-primary: black;
  --txt-color-secondary: white;
  --heading: 3rem;
  --sub-heading: 2rem;
  --normal: 1rem;
  --small: 0.5rem;
  --main-padding: 10px;
}

* {
  margin: none;
  padding: 0;
  box-sizing: border-box;
}

.container__main {
  width: 90%;
  margin: auto;
}

.container__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex__box {
  font-weight: 900;
  font-size: var(--normal);
  background-color: aqua;
  flex: 0 0 calc(50% - 10px);
}

.red {
  background-color: red;
}

.gray {
  background-color: gray;
}

.container__main>.container__flex {
  margin-bottom: 10px;
}

.container__flex>.flex__box {
  padding: var(--main-padding);
}

.p-0 {
  padding: 0 !important;
}

ul {
  list-style-position: inside;
}
<div class="container__main">
  <div class="container__flex">
    <div class="flex__box">
      <b></b>
      <span class="heading">W</span>eb <span class="heading">A</span>pplication <span class="heading">T</span>echnologies
    </div>
    <div class="flex__box gray">
      <div class="container__flex">
        <div class="flex__box p-0 red">
          <span class="sub-heading">Links</span>

          <ul>
            <li>Chubkins</li>
            <li>W3 Schools</li>
            <li>Learn Web Dev</li>
            <li>Colour Reference</li>
          </ul>


        </div>
        <div class="flex__box p-0 red">

        </div>
      </div>

    </div>
  </div>
  <div class="container__flex">
    <div class='flex__box'>
      box1
    </div>
    <div class='flex__box'>
      box2
    </div>
  </div>
</div>
参看。https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-position

推荐阅读