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

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

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:

I could not figure out how to do it. I tried to put

 TRY123 

before and after

<a href="#"> Catelyn</a>

like this:

 TRY123 <a href="#"> Catelyn</a> TRY123 

but this happens: (and i tried many things.)

Any help appreciated!

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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>

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

Sign up