У меня есть список элементов внутри табличного контейнера с горизонтальной прокруткой. Каждый элемент имеет одинаковую ширину, но может иметь разную высоту. Мне бы хотелось, чтобы у каждого из этих элементов была кнопка в правом верхнем углу, но я не хочу, чтобы эта кнопка прокручивалась из поля зрения, когда элементы становятся слишком длинными.
Я нашел это ответ , который решает ту же проблему, но только для одного элемента в элементе прокрутки. Он основан на расположении кнопки относительно контейнера, что я не могу сделать из-за списка элементов.
Моя текущая попытка выглядит следующим образом:
.container {
width: 400px;
position: relative;
overflow-x: auto;
}
.table {
display: table;
}
.row {
/*
If the row isn't relative, all buttons stick to the
container top.
However, the buttons are now also out of view
due to the overflow.
*/
position: relative;
/* Just to make the content overflow */
white-space: nowrap;
/* For a clearer distinction between rows */
padding: 0.5rem;
border-bottom: 1px solid black;
}
.button {
/* The button needs to be in line with the parent row */
top: 0;
right: 0;
position: absolute;
}
<div class="container">
<div class="table">
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">1</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
<br>
This one is however a bit taller than the other items.
</div>
<button class="button">2</button>
</div>
<div class="row">
<div>
Some content so long that it for sure overflows the container, and thus a horizontal scroll is needed.
</div>
<button class="button">3</button>
</div>
</div>
</div>