Question

我有一些文本块要显示在同一行中。我尝试将它们包装起来，这样就不必在它们之间添加空格。但是，当我尝试时，似乎会换行。是否有将其更改为尾随空格或使用其他标签实现目标的方法？

Answer 1

您可以使用 

创建不间断的空格

Text&nbsp;Text

您还可以使用元素的margin属性来设置其与最近元素的距离（有四个margin属性：margin-top，margin-bottom，{{1} }和margin-right）。

margin-left

您可以使用Text text textMore text more text使元素停留在同一行。只需更改display: inline-block和margin-right属性即可调整元素之间的间距。

margin-left

.square{
 width: 50px; 
 height: 50px;
 display: inline-block;
 border: 1px solid black;
 background-color: dodgerblue;
}

Answer 2

通常，这是通过将无序列表元素<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>

如何使HTML <p>标签不在CSS中添加换行符而是尾随空格？

2 个答案: