Question

我正在动态生成一个表。该行有很多单元格。一个单元格中包含ul列表。同一行中的其他一些单元格具有相同类型的ul列表，其中li元素的数量完全相同。

所以我想感受li项目，虽然它们位于不同的单元格中，但它们在视觉上位于同一行。没有边框，很难在同一行中匹配它们。所以我想在ul/li中添加一个边框线，但由于它位于单元格中，因此我无法在整个表格行中将其扩展为与同一行中另一个单元格中的其他列表连接...

更改html很麻烦。任何CSS方式来实现这个目标？

Answer 1

很难说没有看到一些代码......但如果我理解正确，就没有简单的方法可以按照你描述的方式在表格单元格中放置一行。但是，您可以将下边框应用于每行中的li元素，如下所示（向每个列表中的第三个列表项添加边框）：

td li:nth-child(3) {
    border-bottom: 1px solid red;
}

fiddle

它不完全是您正在寻找的东西，但它有助于识别连续的项目。

Answer 2

重新阅读您的帖子后，您只是想在li行之后设置下划线？如果是这样，您可以使用与我在下面的答案相同的方法，只是不要使用transform将其重新移回，以便边框位于文本之后

＆＃13;

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul {
  list-style: none;
}
table {
  border: 1px solid black;
  position: relative;
}
td {
  padding: 1em;
}
li:not(:last-child):after {
  content: '\00a0';
  border-bottom: 1px solid black;
  left: 0; right: 0;
  position: absolute;
}

＆＃13;

<table>
  <tr>
    <td>
      <ul>
        <li>foo</li>
        <li>bar</li>
        <li>foo</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>foo</li>
        <li>bar</li>
        <li>foo</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>foo</li>
        <li>bar</li>
        <li>foo</li>
      </ul>
    </td>
  </tr>
</table>

＆＃13;

您可以在li上使用绝对定位的伪元素绘制线条，并使table相对定位，以便该线条扩展表格的宽度。

＆＃13;

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
ul {
  list-style: none;
}
table {
  border: 1px solid black;
  position: relative;
}
.strike:after {
  content: '\00a0';
  border-bottom: 1px solid black;
  left: 0; right: 0;
  position: absolute;
  transform: translateY(-50%);
}

＆＃13;

<table>
  <tr>
    <td>
      <ul>
        <li>foo</li>
        <li>bar</li>
        <li>foo</li>
      </ul>
    </td>
    <td>
      <ul>
        <li class="strike">foo</li>
        <li>bar</li>
        <li>foo</li>
      </ul>
    </td>
    <td>
      <ul>
        <li>foo</li>
        <li>bar</li>
        <li class="strike">foo</li>
      </ul>
    </td>
  </tr>
</table>

＆＃13;

Answer 3

在阅读了你的问题之后，我得出了以下结论和结果，你正面临排行问题。你可以通过以下方式实现这一目标：

ul {  
border: 1px solid black;  
}  
row {  
border: 1px solid black;  
}

CSS通过整个父行扩展内部元素边框水平

3 个答案: