Можно ли отображать списки (<ol>, <ul>) в виде встроенных элементов?

Question

Я знаю, что это блочные элементы, но я уверен, что есть способ, может быть, с CSS? Я пытался использовать тег span, но он не работает. Что я сделал не так? Я хотел бы разместить второй элемент рядом с первым на веб-сайте. Не под ним, а рядом.

  <span>
        <section>
        <h3>Favourite quotes</h3>
         <ul>
          <li>
              “Pizza is good" ―Me
          </li>     
         </ul>
        </section>
  </span>

  <span>
        <section>
        <h3>Favourite series</h3>
         <ul>
          <li> X </li>
          <li> Y </li>
          <li> Z </li> 
         </ul>
        </section>
  </span>

Answer 1

Использование span это неправильный способ, потому что span - это inline элемент , и вы не можете обернуть section, как этот, и любые другие block. Вы можете использовать <table> или flexbox для этого случая.

.container {
  display: flex;
}

.container section {
  width: 50%;
}

<div class="container">
  <section>
    <h3>Favourite quotes</h3>
    <ul>
      <li>“Pizza is good" ―Me</li>
    </ul>
  </section>
  <section>
    <h3>Favourite series</h3>
    <ul>
      <li> X </li>
      <li> Y </li>
      <li> Z </li> 
    </ul>
  </section>
</div>

Answer 2

сделать два «пролета» «встроенным блоком» дисплея и все!

.first,.second{
  display:inline-block;
}

  <span class="first">
        <section>
        <h3>Favourite quotes</h3>
         <ul>
          <li>
              “Pizza is good" ―Me
          </li>     
         </ul>
        </section>
  </span>

  <span class="second">
        <section>
        <h3>Favourite series</h3>
         <ul>
          <li> X </li>
          <li> Y </li>
          <li> Z </li> 
         </ul>
        </section>
  </span>

Answer 3

Попробуйте что-то вроде этого

.displayList .ol .ul {
    visibility: visible;
}