Использование разделителя в столбце

Я хочу использовать разделитель в каждом столбце при использовании столбца столбца 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}

Что я хочу что-то как-

я стараюсь:

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

Только граница в правой части ли, но не в последней колонке .

источник

2016-06-16 Anonymous

Если мое понимание вопроса верное, вы можете достичь этого, используя column-rule property. Это сокращенное имущество, которое состоит из column-rule-width, column-rule-color и column-rule-style. Эти три долговечных свойства работают точно так же, как border-width, border-color и border-style. column-rule-style поддерживает все значения, которые поддерживаются border-style.

Обратите внимание, что вы не может производить скругленные сепараторы (то есть, нет никакого эквивалента 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>

источник

2016-06-16 05:10:00 Harry

я сделать изображение на жестком чертежу, потому что мне нужно, чтобы установить границы середины, но моя попытка идет направо, а также последней. Ваша догадка в праве, и мне это нужно, но возможно ли сделать правило средним? –

Извините, не совсем понял. Вы говорите, что разделитель должен быть точно посередине (равное пространство с обеих сторон) столбцов и что на правом краю не должно быть разделителя? – Harry

Я могу сделать это легко, как я хочу, спасибо за вашу помощь. –

правила использования столбца URL-

 -webkit-column-rule: 4px outset red; /* Chrome, Safari, Opera */ 
    -moz-column-rule: 4px outset red; /* Firefox */ 
    column-rule: 4px outset red;

Codepen - http://codepen.io/nagasai/pen/jrrGGX для справки

Надеюсь, что это сработает для вас

источник

2016-06-16 05:18:25

Не могли бы вы объяснить? –

Правило столбца - свойство CSS для стилизации (ширина, стиль, цвет) между столбцами –

Используйте пробел в столбце ... для регулировки расстояния и расположения разделителя до центра -webkit-column-gap: 40px;/* Chrome, Safari, Opera */ -moz-column-gap: 40px;/* Firefox */ column-gap: 40px; –

Просто другое альтернативное решение.

.channel_list{ 
 
    -webkit-column-count: 3; /* Chrome, Safari, Opera */ 
 
    -moz-column-count: 3; /* Firefox */ 
 
    column-count: 3; 
 
} 
 
.channel_list li{ list-style: none;border-right:5px solid red} 
 
.channel_list li:nth-child(n+9){border-right:none} /* selects from the ninth onwards */

<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> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 6</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 7</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 8</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 9</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 10</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 11</li> 
 
     <li><input class="channels" type="checkbox" name="5" value="y">&nbsp;Channel 12</li> 
 
</ul>

источник

2016-06-16 05:21:28

Но это может вызвать проблемы, когда у вас разные. детей. Например, если их шесть, тогда текущий селектор удалит только границу на последнем. – Harry

Это только работа для 5-канального и 3-х столбчатых счетчиков. Но не для динамического. Извините, что не упоминал о своей динамичной работе. –

В этом случае мы можем использовать: nth-child свойство для конкретных детей. Я не знаю о CSS-столбцах, поэтому я поставил этот ответ. –

Использование разделителя в столбце

ответ

Смежные вопросы