如何将三个不同的段落彼此相邻放在一个列表中？

Question

   -

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”文本的顶部放置一个段落。一个在“凯特琳”文本的底部。我想为此目的使用段落元素。我想添加两个段落并按照这样做：

我无法弄明白该怎么做。我试图在<p> TRY123 </p>之前和之后<a href="#"> Catelyn</a>添加<p> TRY123 </p> <a href="#"> Catelyn</a> <p> TRY123 </p>：config.middleware.insert_before ActionDispatch::Static, Rack::Deflater但是会​​发生这种情况:(我尝试了很多东西。）

任何帮助表示赞赏！

Answer 1

默认设置<a>代码display: block;，将其设置为display: inline。

另外，请确保<ul>已关闭。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;