是否可以将列表 (<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"内联块"，就是这样！

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

试试这样的事情

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

Answer 3

以这种方式使用span是错误的span因为是inline元素，你不能像这样包装section和任何其他block。在这种情况下，您可以使用<table>或弹性框。

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