Rivnat Nasah Rivnat Nasah - 5 months ago 36
CSS Question

Using separator in column count

I want to use a separator in every column while using the column-count of CSS.

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}


What i want something like-
enter image description here

I try:

.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

If my understanding of the question is correct, you can achieve this using the column-rule property. It is a shorthand property which comprises of column-rule-width, column-rule-color and column-rule-style. These three long-hand properties work exactly similar to border-width, border-color and border-style. column-rule-style supports all values that are supported by border-style.

Note that you can't produce rounded separators (that is, there is no equivalent of border-radius).

(The property still needs vendor prefixes in all browsers other than IE!.)

.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.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>