html - 以相等的宽度和边距 flex

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

1. 将 box-sizing: border-box 添加到您的输入中，使其宽度不会超过 100%。
2. 移除 li
的左右边距
3. 将 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>