以相等的宽度和边距弯曲

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. 在您的输入中添加<section class="container"> <h2>es6 Javascript Table Filter</h2> <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filter"> <table class="order-table table"> <thead> <tr> <th>Name</th> <th>Email</th> <th>Phone</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>John Doe</td> <td>john.doe@gmail.com</td> <td>0123456789</td> <td>99</td> </tr> <tr> <td>Jane Vanda</td> <td>jane@vanda.org</td> <td>9876543210</td> <td>349</td> </tr> <tr style="display: none"> <td>!@#!@#!qawsed</td> <td>ewewewewew@batman.com</td> <td>6754328901</td> <td>199</td> </tr> </tbody> </table> </section>，以使宽度不会超过100％。
2. 从您的box-sizing: border-box上删除左边距和右边距
3. 将li设置为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;
}

Answer 2

您可以如下调整边距：

#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 3

将width: calc(100% + 18px);设置为ul，然后从margin/padding-left li中删除odd

#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>