我有一些文本块要显示在同一行中。我尝试将它们包装起来,这样就不需要在它们之间添加空格。但是,当我尝试<p>
时,似乎会换行。有没有办法将其更改为尾随空格,或者使用其他标签来实现目标?
发布于 2018-08-01 06:19:56
通常,这是通过无序列表元素<li></li>
完成的,这些元素包装在<ul></<ul>
中并在CSS中设置为display:inline;
样式。
然后,您可以根据自己喜欢的间距添加left-margin
或right-margin
值。
<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>
发布于 2018-08-01 06:18:45
您可以使用
创建不间断的空间
Text Text
还可以使用元素的margin
属性设置它与最近元素的距离(有四个margin
属性:margin-top
、margin-bottom
、margin-right
和margin-left
)。
<span>Text text text</span><span style="margin-left: 30px;">More text more text</span>
您可以使用display: inline-block
使元素保持在同一行上。只需更改margin-right
和margin-left
属性即可调整元素之间的间距。
.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>
https://stackoverflow.com/questions/51622885
复制相似问题