我有以下模板：<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' 但也失敗了..
1 回答
泛舟湖上清波郎朗
TA貢獻1818條經驗 獲得超3個贊
您可以依靠相對/絕對位置來使用父級作為參考。
例子 ：
.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>
- 1 回答
- 0 關注
- 115 瀏覽
添加回答
舉報
0/150
提交
取消