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?
2 Answers
You can create a non-breaking space using
Text 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>
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>
-
I turn that into
li
andul
and set the display inline stuff. However, it still seems every instance is displayed in a new line. Any thoughts?– Mr.cyslCommented 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
span
instead ofp
?