时间戳

首页 > 解决方案 > CSS 通过活动元素定位内容

html - CSS 通过活动元素定位内容

问题描述

当在它之后和之前有足够的其他子元素时，我希望活动元素在父元素中居中。当活动元素是第一个子元素时，它应该保留在左侧。当活动元素是最后一个子元素时，它应该保留在右侧。

<div class="container">
<div class="recent-dates">
<a class="date-text" href="/14159#2020-08-05">Wed&nbsp;05</a>
<a class="date-text" href="/14159#2020-08-06">Thu&nbsp;06</a>
<a class="date-text" href="/14159#2020-08-07">Fri&nbsp;07</a>
<a class="date-text" href="/14159#2020-08-08">Sat&nbsp;08</a>
<a class="date-text" href="/14159#2020-08-09">Sun&nbsp;09</a>
<a class="date-text" href="/14159#2020-08-10">Mon&nbsp;10</a>
<a class="date-text" href="/14159#2020-08-11">Tue&nbsp;11</a>
<a class="date-text" href="/14159#2020-08-12">Tue&nbsp;12</a>
<a class="date-text" href="/14159#2020-08-13">Thu&nbsp;13</a>
<a class="date-text active" href="/14159#2020-08-14">Fri&nbsp;14</a>
<a class="date-text" href="/14159#2020-08-15">Sat&nbsp;15</a>
<a class="date-text" href="/14159#2020-08-16">Sun&nbsp;16</a>
</div>
</div>

.container {
   width: 500px  
}

.recent-dates {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #181717;
    height: 60px;
    overflow: hidden;
}

.date-text {
    font-weight: normal;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.4);
    padding: 10px;
}

.date-text.active {
    font-weight: bold;
    color: #62E479;
}

jsfiddle来说明问题https://jsfiddle.net/koyz1arv/

我可以用 JavaScript 自己做，但可能有一些纯 CSS 的解决方案？

编辑（使其更清晰）

当它之前和之后有足够的元素时，活动元素应该在父元素的中间。子元素之间的空格必须保持不变。

标签： htmlcss

解决方案

推荐阅读