Почему <ul>выходит из коробки, когда отступ равен нулю? - PullRequest
Новая
       61

Почему <ul>выходит из коробки, когда отступ равен нулю?

1 голос
/ 19 октября 2019

Эти контейнеры расположены с использованием вложенного 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

Поскольку это был небольшой проект, я не добавил ни одного комментария, извините за неудобства.

1 Ответ

1 голос
/ 19 октября 2019

Вероятно, это связано со значением по умолчанию свойства 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
...