使用flex时如何在HTML中添加新行？答案

【问题标题】：How to add a new line in HTML when using flex?使用flex时如何在HTML中添加新行？
【发布时间】：2021-01-19 16:32:10
【问题描述】：

我希望单独的消息在它们之间有一些垂直距离。每条消息都是一个跨度，这是我为跨度编写的 CSS 代码：

span {
        color: #eeeeee;
        float: right;
        font-size: 120%;
        margin-right: 6%;
        margin-left: 30%;
        background-color: #393e46;
        border-radius: 25px 25px 5px 25px;
        padding: 10px 18px 10px 20px;
        margin-top: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }

这里是 2 条消息的代码：

<span style="padding: 10px 20px 10px 18px;">hey</span>
<br>
<span style="float: left; margin-left: 6%; margin-right: 30%; border-radius: 25px 25px 25px 5px; background-color: rgb(104, 109, 117); padding: 10px 20px 10px 18px;">Hi!</span>

结果如下：

我忘了说这是短消息（长度少于 4 个字符）的问题。有没有什么办法解决这一问题？我尝试使用 div 而不是 span 并且我在那里遇到了同样的问题。我尝试调整 margin，但效果不够好，无法使用它（长消息看起来很糟糕，而且整个代码开始变得混乱，我不希望这样）。

提前致谢。

【问题讨论】：

这是因为你浮动跨度。看看 css clear: both;
我个人也建议不要使用浮点数。你想在容器上使用 flex 或 grid 然后 justify-content / justify-self。
只使用段落而不是跨度，不要浮动，，，问题解决了
Float 有其用途，例如，将图像“浮动”放置在文章内容中，但它似乎不是您想要的。如果您使用它来设计布局，它将对您不利。我同意@JakeAve，在这种情况下你不应该使用它。
@E.Zacarias 谢谢。但我想，我会坚持浮动。它很容易使用，我不会在这个项目中再做任何 CSS（所以，float 不会破坏任何东西，因为现在一切正常，我不会添加任何东西）。但我会在我未来的项目中考虑其他方式。而且我毕竟不是前端开发人员（我通常只做后端）。不过还是谢谢你。

标签： html css spacing margins

【解决方案1】：

将clear: both; 添加到您的<br> 以打破浮动，这将导致一个新行。

【讨论】：

【解决方案2】：

你可以使用 flex 并做到这一点。

 <div style="display:flex"> 
   <span style="float:left;padding: 10px 20px 10px 18px;">hey</span>
 <span style="margin-left: auto;
  order: 2; background-color: rgb(104, 109, 117); padding: 10px 20px 10px 18px;">Hi!</span>
  </div>

【讨论】：

这个答案仍然存在发帖人询问的基本垂直间距问题......
@AlexanderNied 可以详细说明吗？
我考虑了对齐并忘记了新行。明确：两者都应该很好

【解决方案3】：

您可以在第二个跨度中添加 margin-top:__ （取决于您想要的距离）

span {
        color: #eeeeee;
        float: right;
        font-size: 120%;
        background-color: #393e46;
        border-radius: 25px 25px 5px 25px;
        padding: 10px 18px 10px 20px;
        margin-top: 2%;
        padding-left: 20px;
        padding-right: 20px;
    }
    #first{
    padding: 10px 20px 10px 18px;
    }
    #second{
    float: left;
    margin-left: 6%; 
    margin-right: 30%;
    border-radius: 25px 25px 25px 5px;
    background-color: rgb(104, 109, 117); 
    padding: 10px 20px 10px 18px;
    margin-top:40px;
    }

    <span id="first">hey</span>
<br>
<span id="second">Hi!</span>

【讨论】：