使用column-count和column-rule时的列填充

问题描述

我已经创建了column-count属性，以在UL内部创建三列布局。我希望每一列看起来彼此分开，并使用column-rule属性来实现这一点。

这是一个看起来像这样的例子：

我想要实现的是在每列中添加顶部和底部填充。如果将顶部和底部填充添加到UL，则如下所示：

请注意，它们不再看起来像三个单独的列。

有人知道一种将填充添加到所有列而不将它们连接在一起的方法吗？

要点：

• 此列表中的项目数可能有所不同。 （否则，我会考虑在CSS中使用nth-child）。
• 我已经考虑过将flex与包裹一起使用，但是，我认为这需要固定高度。 （如果我错了，请纠正我。）
• 目标是将所有列表项归入一个UL。

body {
  font-family: system-ui;
  background: white;
  
  text-align: center;
}


ul{
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: pink;
  margin: 0px;  
  column-count: 3;
  column-rule: 15px solid 
    white;
  list-item-style: none;
  list-style: none;
    margin: 0px;
  padding: 10px 0px;
  
  
  
}

li{
    border: 1px solid red;
    margin: 0px;
  }

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
 <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

解决方法

您可以通过保留填充并更改背景色来创建带有渐变的间隙来进行近似估算：

body {
  font-family: system-ui;
  background: white;
  text-align: center;
}

ul {
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: 
    linear-gradient(#fff,#fff) calc(1*100%/3 - 5px) 0,linear-gradient(#fff,#fff) calc(2*100%/3 + 5px) 0,pink;
  background-size:15px 100%;
  background-repeat:no-repeat;
  margin: 0px;
  column-count: 3;
  column-rule: 15px solid white;
  column-gap:  15px;
  list-item-style: none;
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: 0px;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

另一种具有透明度的语法：

body {
  font-family: system-ui;
  background: #f3f3f3;
  text-align: center;
}

ul {
  font-size: 1.3rem;
  line-height: 2.3em;
  flex-basis: 100%;
  flex-wrap: wrap;
  background: 
    linear-gradient(pink 0 0) left,linear-gradient(pink 0 0) center,linear-gradient(pink 0 0) right;
  background-size:calc((100% - 30px)/3) 100%;
  background-repeat:no-repeat;
  margin: 0px;
  column-count: 3;
  column-rule: 15px solid transparent;
  column-gap:  15px;
  list-item-style: none;
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: 0px;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>

,

已经回答了，但是使用css var进一步注意列间距：

它也是平均水平，但让您对使用渐变的可能性有所了解。

html,body {
  font-family: system-ui;
  background: white;
  margin: 0;
  text-align: center;
}

ul {
  --colGapSize: 15px;
  --colGapSizeBg: calc( var(--colGapSize) / 2);
  font-size: 1.3rem;
  line-height: 2.3em;
  background: linear-gradient(to right,pink calc(33.33% - var(--colGapSizeBg)),white calc(33.33% - var(--colGapSizeBg)),white calc(33% + var(--colGapSizeBg)),pink calc(33% + var(--colGapSizeBg)),pink calc(67% - var(--colGapSizeBg)),white calc(67% - var(--colGapSizeBg)),white calc(66.66% + var(--colGapSizeBg)),pink calc(66.66% + var(--colGapSizeBg)))
  ;
  margin: 0px;
  column-count: 3;
  column-gap: var(--colGapSize);
  list-style: none;
  margin: 0px;
  padding: 10px 0px;
}

li {
  border: 1px solid red;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
  max-width: 100%;
}

<ul>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
  <li>
    <a href="#">Test item</a>
  </li>
</ul>