Вставить интервал в длинный столбец rmarkdown

Как часть сообщения, использующего blogdown, я показываю список имен в трех столбцах. Я хотел бы добавить пробел между каждой группой из пяти имен в документе RMarkdown.

Я пробовал <br> через каждые пять имен, но это сработало только для первого столбца, и это не очень элегантно. Как лучше всего это сделать?

Вставить интервал в длинный столбец rmarkdown

<style>
 .col3 {
    columns: 3 100px;
    -webkit-columns: 3 100px;
    -moz-columns: 3 100px;
  }
</style>


<font size = 3>
<div class = "col3">
- Amur Cork
- Apple
- Ash
- Austrian Pine
- Black Cherry
<br>  
- Black Maple
- Black Oak
- Black Willow
- Bur Oak
- Callery Pear 'Chanticleer'
<br>  
- Carolina Poplar
- Colorado Blue Spruce
- Columnar Norway Maple
- Crab Apple
- Eastern Hemlock
<br>  
- European Beech
- Ginkgo
- Hack-Berry
- Honey Locust
- Kentucky-Coffee Tree
<br>
- Linden
- Manitoba Maple
- Maple
- Mulberry
- Norway Maple
<br>
- Oak
- Red (Green) Ash
- Red Maple
- Red Oak
- Sassafras
<br>
- Scotch Elm
- Scots Pine
- Service-Berry
- Siberian Elm
- Silver Maple
<br>
- Silver Queen Silver Maple
- Silver White Poplar
- Skyline Honey Locust
- Sugar Maple
- Tulip-Tree
<br>
- Walnut
- Weeping Willow
- White Ash
- White Oak
- White Pine
<br>
- Willow
- Yew 
</div>
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
145
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваши первые три тега <br> имеют два конечных пробела, после рендеринга они отображаются как

  <li>Black Cherry <br><br>
  </li>

Без конечных пробелов:

  <li>Sassafras <br></li>

Вы можете добавить два пробела к остальным тегам <br> или удалить все теги <br> и разделить список новой строкой.

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

ixodid 21.07.2018 22:59

@ixodid макет css с несколькими столбцами не имеет тонкого управления, как вам требуется, пожалуйста, прочтите эта страница w3c, чтобы узнать больше.

TC Zhang 22.07.2018 07:14

@ixodid вы все равно можете установить каждый столбец отдельно и объединить их вместе, используя синтаксис html / css, но это кажется излишним.

TC Zhang 22.07.2018 07:16

Другие вопросы по теме