让Span坚持到顶部

Question

我有以下元素，在我的页面上显示实时游戏。

<div class="event-top">
<a href=".." class="event-match">
<span class="event-time">25/01 07:00pm</span>
<span class="event-name">Ironi Ramat Hasharon 0-0 Hapoel Natzrat-Elite</span>
<span class="event-league"> - Leumit League - Israel - Football</span>
<span class="event-more">DETAILS</span>
</a>
</div>

css很直接：

.event-match {
display: block;
}
.event-more {
float:right;

我试图让事件更多的文字贴在右上角区域，即使屏幕尺寸变小到足以让事件名称和事件联盟分成两行，但第一件事就是当屏幕尺寸变小时发生，则DETAILS转到新线。我该如何保持原位？我觉得我已经尝试过了。

Answer 1

只需制作元素absolute

.event-match {
    background-color: white;
    display: block;
}
.event-more {
    background-color: green;
    top: 0; // you can adjust top and right to suit your needs.
    right: 0; 
    position: absolute;
}