创建一个包含 7 条垂直分割线的 div答案

【问题标题】：Create a div with 7 dividing vertical lines创建一个包含 7 条垂直分割线的 div
【发布时间】：2017-04-27 00:58:58
【问题描述】：

希望创建一个 div 元素，并在其中有 7 条等分垂直线。

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

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

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

【问题讨论】：

我不明白，请提供一个有效的 jsfiddle

标签： html css

【解决方案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)
  );
}

&lt;div&gt;&lt;/div&gt;

使用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;
}

&lt;div&gt;&lt;/div&gt;

使用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;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

您的解决方案还有一个问题。如果我想让 div 拉伸页面的整个宽度，但显然仍然有 7 条分割线，我该怎么做？
您可以将<div>拉伸到任意宽度，边框是根据<div>的宽度计算的。所以你可以将<div>的宽度设置为100%。
重复线性渐变是一种更平滑的解决方案。使用线性渐变将 div 拉伸到 100% 意味着计算是偏移的。使用重复线性渐变，您就没有这个问题

【解决方案2】：

你可以使用带有7个水平字段的表格，你可以在一个div中使用7个div元素，你可以像制作水平导航栏一样使用7个元素的列表，购买你不能只使用CSS分割一个div。

如果问题是您的内部边框是 2 倍宽，请使用：

border-collapse: collapse;

【讨论】：