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

Question

我希望单独的消息之间有一定的垂直距离。每条消息都是一个跨度，这是我为跨度编写的 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 但它的效果还不够好，无法使用它（那些边距的长消息看起来很糟糕，整个代码开始变得混乱，我不希望那样）。

提前致谢。

Answer 1

你可以在第二个跨度中添加 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>

Answer 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>

Answer 3

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

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

How to add a new line in HTML when using flex?

html

css

margins

spacing