0

I have some text blocks to be displayed in the same line. I tried to wrap up them so that I do not need to add white spaces between them. However, when I tried <p>, it seems that will do a line break. Is there anyway to change that to a trailing space, or using other tags to achieve the goal?

1
  • use span instead of p? Commented Jul 31, 2018 at 22:19

2 Answers 2

2

You can create a non-breaking space using &nbsp;

Text&nbsp;Text

You can also use an element's margin properties to set its distance from the nearest element (there are four margin properties: margin-top, margin-bottom, margin-right, and margin-left).

<span>Text text text</span><span style="margin-left: 30px;">More text more text</span>

You can use display: inline-block to make elements stay on the same line. Just alter the margin-right and margin-left properties to adjust the space between the elements.

.square{
 width: 50px; 
 height: 50px;
 display: inline-block;
 border: 1px solid black;
 background-color: dodgerblue;
}
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square" style="margin-left: 300px;"></div>

0

Typically this is done with unordered list elements <li></li> wrapped in <ul></<ul> and styled in CSS to be display:inline;.

Then you can add your left-margin or right-margin values as you prefer for spacing.

    <style>
    ul li {
      display: inline;
      margin-right: 10px;
      color: blue;
    }
    </style>
    
    <ul>
      <li>Some Text</li>
      <li>More Text</li>
      <li>Some More</li>
    <ul>

2
  • I turn that into li and ul and set the display inline stuff. However, it still seems every instance is displayed in a new line. Any thoughts?
    – Mr.cysl
    Commented Jul 31, 2018 at 22:38
  • Your inheritance on your li elements is most likely incorrect. See the example I just added. Commented Jul 31, 2018 at 22:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.