Html Question posted in
Some basic documentation can be found here.

Html – How to put multiple p-tags containing multi-line text together (side by side) in css?

I want exactly something like the following:
Side by side p-tages

Several texts that may be more than one line, and after the end of each <p></p> tag there is a shape (circle) and the next text starts from its continuation.

I tried putting inline style to each element but it didn’t work well!

/*The div tag is related to the circle shape*/

<p style="display: inline">This is a Lorem ipsum</p>
<div style="display: inline"></div>
<p style="display: inline">dolor sit amet</p>
<div style="display: inline"></div>
<p style="display: inline">elit sed do</p>
<div style="display: inline"></div>
<p style="display: inline">eiusmod tempor incididunt</p>
<div style="display: inline"></div>
Tags:

2

Answers


  1. 0

    Since your div is an inline element, it will take the width of the content. Since, the content is empty, the div will not have width.
    Make the display style of your div to inline-block; Also, add following style to test. It worked for me.

     div {
       background-color:gray;
       height:10px;
       width:10px;
       border-radius:5px;
     }
    Login or Signup to reply.
  2. 0 
    .circle-after {
  position: relative;
  padding-right: 24px;
}

.circle-after::after {
  content: "";
  width: 20px;
  height: 20px;
  background: lightblue;
  position: absolute;
  border-radius: 100px;
  right: 0px;
}

p {
  line-height: 130%;
}
div {
  max-width: 50%;
}
    <div>
  <p>
    This is a Lorem ipsum<span class="circle-after"></span> dolor sit amet<span class="circle-after"></span> elitsed do<span class="circle-after"></span> eiusmod tempor incididunt<span class="circle-after"></span> ut lab <span class="circle-after"></span> et dolor magna aliqua. Ut enim ad minim<span class="circle-after"></span>
  </p>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search