具有相同宽度和边距的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>