将孩子置于父母上方

Question

我有以下模板：<div class="messages">  <ul class='messages__list'> // display: flex ******EDIT****** flex-direction: column    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">      <span class="message-full-date">date</span> // position: fixed, left: 45%;      <p class="message message-name">name</p>      <p class="message message-content">content</p>    </li>  </ul></div>我想将跨度（完整日期）放置在“li”上方的“行”中 - 这样它们就不会在小屏幕上彼此重叠。有办法做到吗？我尝试以不同的方式定位其他元素（绝对、相对、固定），并以不同的方式显示它们，但这对我不起作用。我还尝试使用 css "::after"/"::before' 但也失败了..

Answer 1

您可以依靠相对/绝对位置来使用父级作为参考。

例子 ：

.messages__list__item {

  position: relative;

  margin-top: 1.2em;

}

.message-full-date {

  position: absolute;

  bottom: 100%;

  left: 0;

  right: 0;

  width: max-content;

  margin: auto;

}

.flex {display:flex;}

.flex li {flex:1}

/* see us */

li , .message-full-date{border:solid 1px;}

<div class="messages">

  <ul class='messages__list'>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

  </ul>

</div>

<div class="messages">

  <ul class='messages__list flex '>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item">

      <span class="message-full-date">date</span>

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

  </ul>

</div>

如果必须显示日期，您还可以使用 ::before 伪值来生成此容器

li.message-full-date:not([data-date=""]) {

  margin: 2px 0 0 0;/* possibly useful */

}

.flex li.message-full-date:not([data-date=""]) {

  margin: 0 0 0 2px ;/* possibly useful */

}

.message-full-date:not([data-date=""])::before {

  content: 'date :'attr(data-date);

  display: block;

  width: max-content;

  margin: auto;

}

.flex {

  display: flex;

}

.flex li {

  flex: 1

}

/* see us */

li,

.message-full-date::before {

  border: solid 1px;

}

<div class="messages">

  <ul class='messages__list'>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

  </ul>

</div>

<div class="messages">

  <ul class='messages__list flex'>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/01/01">

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="">

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

    <li *ngFor="let msg of currConversation.messages" class="messages__list__item  message-full-date" data-date="01/02/01">

      <p class="message message-name">name</p>

      <p class="message message-content">content</p>

    </li>

  </ul>

</div>