css - 在列数中使用分隔符

Question

我想在使用 CSS 的 column-count 时在每一列中使用分隔符。

HTML:

<ul class="channel_list">
    <li><input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
    <li><input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
    <li><input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
    <li><input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
    <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>

CSS:

.channel_list{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
.channel_list li{ list-style: none}

我想要什么——

我尝试:

.channel_list li{ border-right: 5px solid red}

Only the border at the right side of the li's but not in the last column.

Answer 1

如果我对这个问题的理解是正确的，你可以使用 column-rule property 来实现。 .它是一个简写属性，由column-rule-width、column-rule-color和column-rule-style组成。这三个常用属性的工作方式与 border-width、border-color 和 border-style 完全相似。 column-rule-style 支持 border-style 支持的所有值。

请注意，您无法生成圆 Angular 分隔符(也就是说，没有等效于 border-radius 的东西)。

(属性 still needs vendor prefixes in all browsers other than IE! .)

.channel_list {
  padding: 0;
  text-align: center; /* make the separator look like it is in middle */
  -webkit-column-count: 3;  /* Chrome, Safari, Opera */
  -moz-column-count: 3;  /* Firefox */
  column-count: 3;
  
  /* just for spacing */
  -webkit-column-gap: 20px;
  -moz-column-gap: 20px;
  column-gap: 20px;
}
.channel_list li {
  list-style: none;
}
.channel_list.solid {
  -webkit-column-rule: 5px solid red;
  -moz-column-rule: 5px solid red;
  column-rule: 5px solid red;
}
.channel_list.dashed {
  -webkit-column-rule: thin dashed chocolate;
  -moz-column-rule: thin dashed chocolate;
  column-rule: thin dashed chocolate;
}
.channel_list.dotted {
  -webkit-column-rule: medium dotted rebeccapurple;
  -moz-column-rule: thin dotted rebeccapurple;
  column-rule: thin dotted rebeccapurple;
}

<ul class="channel_list solid">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>
<hr>
<ul class="channel_list dashed">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>
<hr>
<ul class="channel_list dotted">
  <li>
    <input class="channels" type="checkbox" name="7" value="y">&nbsp;Channel 1</li>
  <li>
    <input class="channels" type="checkbox" name="8" value="y">&nbsp;Channel 2</li>
  <li>
    <input class="channels" type="checkbox" name="9" value="y">&nbsp;Channel 3</li>
  <li>
    <input class="channels" type="checkbox" name="6" value="y">&nbsp;Channel 4</li>
  <li>
    <input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 5</li>
</ul>