我可以将列表 (<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

尝试这样的事情

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

Answer 2

这样使用 span 是错误的，因为 span 是 inline element 并且您不能像这样包装 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 3

使两个 "span" "inline-block" 显示即可！

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

我可以将列表 (<ol>、<ul>) 显示为内嵌项吗？

Can I display lists (<ol>, <ul>) as inline items?

html

inline

list

html-lists