创建一个具有7个分隔垂直线的DIV

Question

希望创建一个DIV元素，并在其中具有7个同样划分的垂直线。

我知道这可以使用一个容器元素和7个内部元素来完成，但是我想知道是否有一个替代的CSS解决方案可以使用一个元素进行。

更新：Chrome中的一个错误使我无法实现给定的解决方案，因为在更大的宽度上，分界线的颜色和宽度不一致：https：//bugs.chromium.org/p/chromium/sissues/issues/detail?id=1114835

如果此问题不适用于您，请享受！

Answer 1

如果您不需要内容分离器(因此只有Visual(，则可以使用背景或阴影来创建线条。请参阅以下检查/解决方案：

使用linear-gradient：

解决方案

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  background:linear-gradient(
    to right, 
    white, white calc(100% / 7 * 1 - 1px), black, white calc(100% / 7 * 1), 
    white, white calc(100% / 7 * 2 - 1px), black, white calc(100% / 7 * 2), 
    white, white calc(100% / 7 * 3 - 1px), black, white calc(100% / 7 * 3), 
    white, white calc(100% / 7 * 4 - 1px), black, white calc(100% / 7 * 4), 
    white, white calc(100% / 7 * 5 - 1px), black, white calc(100% / 7 * 5), 
    white, white calc(100% / 7 * 6 - 1px), black, white calc(100% / 7 * 6)
  );
}

<div></div>

使用repeating-linear-gradient：

解决方案

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  background:
    linear-gradient(90deg, white 0, white 1px, transparent 1px), 
    repeating-linear-gradient(
      90deg, 
      black 0, black 1px, white 1px, white calc(100% / 7)
    ) 0 no-repeat;
}

<div></div>

---

使用box-shadow：

解决方案

div {
  border:1px dashed red;
  height:100px;
  width:210px;
  box-shadow: 
    inset calc(210px / 7 * 1 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 1) 0px 0px 0px black,
    inset calc(210px / 7 * 2 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 2) 0px 0px 0px black,
    inset calc(210px / 7 * 3 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 3) 0px 0px 0px black,
    inset calc(210px / 7 * 4 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 4) 0px 0px 0px black,
    inset calc(210px / 7 * 5 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 5) 0px 0px 0px black,
    inset calc(210px / 7 * 6 - 1px) 0px 0px 0px white, inset calc(210px / 7 * 6) 0px 0px 0px black,
    inset calc(210px / 7 * 7) 0px 0px 0px white;
}

<div></div>

Answer 2

您可以使用具有7个水平字段的表，您可以在DIV内使用7个DIV元素，您可以使用7个元素的列表，例如制作水平导航栏，购买您无法只需使用CSS对一个Div进行分配。

如果问题是您的内部边界宽2倍：

border-collapse: collapse;