Question

想要创建一个div元素，并在其中有7个等分的垂直线。

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

更新： Chrome中的一个错误阻止我实施给定的解决方案，因为在更大的宽度上，分隔线的颜色和宽度不一致：https://bugs.chromium.org/p/chromium/issues/detail?id=114835

如果此问题不适合您，请尽情享受！

Answer 1

如果您不需要内容分隔符（仅可视），则可以使用背景或阴影来创建线条。请参阅以下考试/解决方案：

解决方案使用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。 / p>

如果问题是你的内部边界是2倍宽，只需使用：

border-collapse: collapse;

创建一个包含7个垂直线的div

2 个答案: