CODEWITHSUNDEEP
htmlcss
Tayfur Gazioglu
Tayfur Gazioglu

Reputation: 109

How to put three different paragraphs vertically next to each other in a single list?

A list element --

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

I want to put one paragraph on top of the "Catelyn" text. One on the bottom of the "Catelyn" text. I want to use paragraph element for this purpose. I want to add two paragraph and do it like this:

Desired

I could not figure out how to do it. I tried to put <p> TRY123 </p> before and after <a href="#"> Catelyn</a> like this: <p> TRY123 </p> <a href="#"> Catelyn</a> <p> TRY123 </p> but this happens: (and i tried many things.)

What?

Any help appreciated!

Upvotes: 2

Views: 218

Answers (1)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

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>

Upvotes: 2

Related Questions