</li>`<ul id="wrapper">
<li>
<a href="#"> Catelyn</a>
</li>`
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;}
<p> TRY123 </p>
<a href="#"> Catelyn</a>
<p> TRY123 </p> <a href="#"> Catelyn</a> <p> TRY123 </p>
Make the <a>
tag display: block;
by default it is set to display: inline
.
Also, make sure your <ul>
's are closed.
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>