Добавить пробел между элементами списка без изменения CSS в заголовке? (и без добавления CSS к каждому элементу <li>)

Question

Я работаю в системе управления контентом (Confluence), где у меня нет возможности объявить CSS материал в заголовке HTML.

Похоже, что старый атрибут

устарел. Есть ли способ сделать объявление стиля в теге списка (

• в этом списке? (например, атрибуты «cellspacing» или «cellpadding» в объявлении

Answer 1

body {
  font-family: sans-serif;
  font-size: 16px;
  padding: 5px 20px;
}

ul {
  list-style: none
}

li {
  background: slategrey;
  display: inline-block;
  /* inline block hack for IE 6&7 */
  zoom: 1;
  *display: inline;
  padding: 4px;
  color: white
}

ul.white-space-fix li {
  margin-right: -4px;
}

ul.zero-size {
  font-size: 0px;
}
ul.zero-size li {
  font-size: 16px;
}

ul.flexbox {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

<h1>Inline-block / white-space bug</h1>
original...
<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by funky code formatting...
<ul>
  <li>
   one</li><li>
   two</li><li>
   three</li>
</ul>

fixed by adding html comments...
<ul>
  <li>one</li><!--
  --><li>two</li><!--
  --><li>three</li>
</ul>

fixed by CSS margin-right: -4px;  (breaks in IE6&7)...
<ul class="white-space-fix">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

fixed by omitting the &lt;/li&gt;
<ul>
  <li>one
  <li>two
  <li>three
</ul>

fixed with font-size: 0 via: https://twitter.com/#!/garand/status/183253526313566208
<br><br>
<ul class="zero-size">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

  <br>
flexbox
    <br>
<ul class="flexbox">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  </ul>

Answer 2

Вы должны включить ссылку или стиль для получения стилей класса.

Если тег стиля отключен, загрузите css и добавьте URL этого файла в href

<link href="list.css" rel="stylesheet" type="text/css">

// Add below code in list.css
ul.space-list li {
margin-bottom: 20px;
}

<!-- html -->
<ul class="space-list">
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>

Или вы можете go с меткой старой школы <br/>, а также как показано ниже

<!-- html -->
<ul class="space-list">
<li>Lorem ipsum</li> <br/><br/>
<li>Lorem ipsum</li> <br/><br/>
<li>Lorem ipsum</li>
</ul>