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）上使用<hr /> CSS属性来“清除”浮动效果。

如何在上一个元素下面显示<hr>元素？

1 个答案: