html - 如何在一个列表中将三个不同的段落彼此垂直放置？

--
Html格式：

    </li>`<ul id="wrapper">
    <li>
        <a href="#"> Catelyn</a>
    </li>`

Css:

li {
width: 200px;
height: 100px;
background: #673ab7;
float: left;
margin: 10px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
border-radius: 2px;
text-align: center;}

ul#wrapper {
list-style: none;
display: inline-block;
margin-top: 100px;}

a {

font-size: 24px;
color: cyan;
line-height: 100px;
font-family: monospace;
text-decoration: none;}

我想在“Catelyn”的文本上加一段。一个在“Catelyn”文本的底部。为此，我想使用段落元素。我想加上两段，然后这样做：

我不知道怎么做。我试着把<p> TRY123 </p>放在<a href="#"> Catelyn</a>前后，就像这样：<p> TRY123 </p> <a href="#"> Catelyn</a> <p> TRY123 </p>但是这发生了：（我试了很多东西。）

感谢任何帮助！

最佳答案

使<a>标记默认设置为display: block;。
另外，确保您的display: inline已关闭。

ul {
  width: 200px;
  text-align: center;
  list-style-type:none;
  padding: 10px;
  color: white;
  background-color: purple;
}
a {
  display: block;
  text-decoration: none;
  font-size: 24px;
  font-weight: bold;
  color: black;
}

<ul>
  <li>
    <p>First paragraph</p>
    <a href="">Catelyn</a>
    <p>Second paragraph</p>
  </li>
</ul>

关于html - 如何在一个列表中将三个不同的段落彼此垂直放置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46496690/