html - 如何将 <hr> 元素显示在前一个元素下方？

Question

首先，对于 CSS 来说，我是一个十足的菜鸟，不知道如何将元素放置在我想要的位置，这真是令人沮丧。 基本上我试图实现的是 <hr>元素显示在时间戳下方，但它始终位于时间戳旁边。

我的 HTML 看起来像这样:

<div *ngIf="messages">
        <div class="messageField">
          <ul class="messageFieldContent">
            <li *ngFor="let element of messages" class="message">
              <div
                [ngClass]="{
                  messageSent: element.userId == 1,
                  messageReceived: element.userId != 1
                }"
              >
                <p>{{ element.messageText }}</p>
                <span
                  [ngClass]="{
                    'time-right': element.userId == 1,
                    'time-left': element.userId != 1
                  }"
                >
                  {{ element.answerDate | date: "d.MM.yyyy, H:mm" }}
                </span>
                <div class="attachment">
                  <hr />
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>

我的 CSS 文件如下所示:

html,body {
    margin: 10px;
    height: 100%;
  }

  .content{
    margin: 10px;
    display: flex;
    flex-flow: column nowrap;
    height: 100%;
  }

  .attachment{
    order: 3;
  }
  .actionButton{
      width: fit-content;
      margin: 10px;
  }

  .selectors{
    margin: 10px;
  }

  .messageField{
      margin-right: 10px;
      width: 100%;
      outline: 2px grey;
      outline-style: solid;
      display: flex;
    flex-flow: column nowrap;
  }

  .messageSent {
    border: 2px solid #dedede;
    background-color: #dcf8c6;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 10px 0 -30px ;
    order: 0;
  }

  .refreshButton{
    border: none;
    background: none;
    margin: 10px;
  }

  /* Darker chat container */
    .messageReceived{
    border: 2px solid;
    border-color: #ccc;
    background-color: #ece5dd;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 10px 0 -30px ;
    order: 0;
  }
  /* Clear floats */
    .messageSent::after {
    content: "";
    clear: both;
    display: table;
  }

  /* Clear floats */
  .messageReceived:after {
    content: "";
    clear: both;
    display: table;
  }

  /* Style time text */
.time-right {
    float: right;
    color: #aaa;
    order: 1;
  }

  /* Style time text */
  .time-left {
    float: left;
    color: #999;
    order: 1;
  }

.message{
    display: flex;
    flex-flow: column nowrap;
  }

  .messageFieldContent{
    overflow: auto;
    height: 470px;
    list-style-type: none;
  }

我这样做是完全错误的还是这里有什么问题？帮助将不胜感激!

Answer 1

尝试添加以下内容:

hr {
    clear: both;
}

您的日期包含 float: left;它对以下元素有特殊的行为。您需要使用clear来“清除” float 效果。下一个元素的 CSS 属性(此处为您的 <hr /> )。