Согните с равной шириной и полем

Question

Я пытаюсь сделать каждую ul li ширину равной указанному выше элементу input, но li имеет margin, и это не может быть равно, то, что я хочу, равно ширине с полем.но это не равно слева и справа.

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}


/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}

<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Я сделал направляющую линию для лучшего понимания, я хочу, чтобы li равнялся зеленой линии, а не красной.(также слева)

Answer 1

Вы можете настроить маржу, как показано ниже:

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
}

.group ul li {
  width: calc(50% - 13px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}
.group ul li:nth-child(2n) {
  margin-right:-8px;
}
.group ul li:nth-child(2n+1) {
  margin-left:0;
}


/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}

<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Answer 2

Установите width: calc(100% + 18px); в ul и удалите margin/padding-left из odd li

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
width: calc(100% + 18px);
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin: 5px;
  padding: 5px;
}
.group ul li:nth-child(odd)  {
padding-left: 0px;
margin-left: 0px;
}

/* guide */

.group ul::after {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: red;
  position: absolute;
  right: 4px;
  top: -36px;
}

.group ul::before {
  content: "";
  display: block;
  width: 1px;
  height: 173px;
  background: green;
  position: absolute;
  right: -4px;
  top: -36px;
}

<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>

Answer 3

1. Добавьте box-sizing: border-box к вашему входу, чтобы он не превышал 100%.
2. Удалите левое и правое поле из вашего li
3. Set justify-content: space-between к вашему .group ul - это установит поле между пунктами.

#inline {
  display: flex;
}

.group input,
.group {
  width: 100%;
  box-sizing: border-box;
}

div#box {
  padding: 40px;
}

.group:first-child {
  margin-right: 50px;
}

.group ul {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  position: relative;
  justify-content: space-between;
}

.group ul li {
  width: calc(50% - 20px);
  background: gray;
  list-style: none;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 5px;
}

<div id="box">
  <div id="inline">
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
    <div class="group"><input type="text" />
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
      </ul>
    </div>
  </div>
</div>