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
但是会发生这种情况:(我尝试了很多东西。)
任何帮助表示赞赏!
答案 0 :(得分:2)
默认设置<a>
代码display: block;
,将其设置为display: inline
。
另外,请确保<ul>
已关闭。
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;