Question

我有一个问题，我不知道是否可以仅使用html / css解决。我可以添加一些JavaScript，但只有在需要时才可以。基本上，我有一个这样的项目列表：

<div class="itemlist">
    <span class="item">item 1</span>
    <span class="item">item 2</span>
    <span class="item">item 3</span>
    <span class="item">item 4</span>
</div>

我想将列表呈现为一行，所有项目都向右浮动（但顺序相同），并具有隐藏的溢出。所以看起来像这样：

| item 1 item 2 item 3 item 4|

或类似的

|1 item 2 item 3 item 4 item 5 item 6 item 7|

我正在尝试在overflow: hidden上使用.itemlist，但是它不起作用。另外，float: right颠倒了项目，所以我没有想要的东西。

我对CSS真的很陌生，在这个网站上，也可以...仅使用html和CSS可以实现该结果吗？你能给我一个关于我要寻找的提示吗？

Answer 1

您可以使用flexbox并将内容结尾对齐：

.itemlist {
  display:flex;
  justify-content:flex-end;
  overflow:hidden;
}

.item {
  white-space:nowrap;  /* this is to stop flexbox making the content wrap to fit the width */
}

<div class="itemlist">
  <span class="item">item 1</span>
  <span class="item">item 2</span>
  <span class="item">item 3</span>
  <span class="item">item 4</span>
</div>

如何使用反向浮动和溢出内联呈现列表

1 个答案: