Question

我正在研究website，在其中我希望在移动视图中的单元格元素之间具有相等的间距。

我想要等间距的特定代码段的HTML代码是：

HTML代码：

<td id="gv-field-6-25" class="gv-field-6-25"></td>

<td id="gv-field-6-29" class="gv-field-6-29">2016</td>

CSS代码：

我正在使用的用于制作单元格元素的完整CSS代码是：

@media (max-width: 767px) {

 .gv-container-2777  th {
    display: none;
  }

  .gv-container-2777  tr + tr {
    display: block;
    border-top: 1px solid black;
        border-bottom: 1px solid black;
  }

 .gv-container-2777 td {
    display: block;
        margin-bottom: 5%;
        margin-top: 7.9%;
  }

 .gv-container-2777     td::before {
      display: block;
      font-weight: bold;
            margin-bottom: 1.6%;
    }


 .gv-container-2777   td:first-child::before {
    content: 'Year Submitted';
  }

 .gv-container-2777    td:nth-child(2)::before {
    content: 'Descriptive Title of Proposal:';
  }

 .gv-container-2777    td:nth-child(3)::before {
    content: 'Name of Institution';
  }

 .gv-container-2777    td:nth-child(4)::before {
   content: 'Awarded'; 

  }

}

问题陈述：

我想知道应该在CSS代码中进行哪些更改（不能更改HTML代码，因为它全部来自wordpress ），以便在边框前后的元素之间有相等的间距。

随附的屏幕截图是我想要边框前后的间距相等的情况：

第一张图片：

第二张图片：

第三张图片：

第4张图片：

在上面的屏幕截图中，边框前后的间距是关闭的。我想知道我应该在小提琴中进行哪些更改，以便可以在边框前后找到相等的间距。

Answer 1

为margin-bottom赋予margin-top和.gv-container-2777 td相同的值。

.gv-container-2777 td {
```
margin-top: 5%;
margin-bottom: 5%;
```
}
为margin-bottom删除.gv-container-2777 td::before

如何在移动视图的表格中的单元格元素之间具有相等的间距？

1 个答案: