Tayfur Gazioglu Tayfur Gazioglu - 3 years ago 133
CSS Question

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!

Answer Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download