Question

在我的网站上，我在导航栏中使用了一个flexbox，它可以水平滚动。我使用这篇博文的帮助来实现它，所以或多或少，我们有相同的代码：https://iamsteve.me/blog/entry/using-flexbox-for-horizontal-scrolling-navigation

HTML：

<header class="scroll">
  <nav>
    <a class="item" href="http://example.com/blog">Blog</a>
    <a class="item" href="http://example.com/portfolio">Portfolio</a>
    <a class="item" href="http://example.com/downloads">Downloads</a>
    <a class="item" href="http://example.com/about">About</a>
    <a class="item" href="http://example.com/contact">Contact</a>
  </nav>
</header>

CSS：

.scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar; }
.item {
  flex: 0 0 auto; }

博客文章中没有包含的内容是如何在边缘的导航栏上添加指示符，这表示此栏可滚动，并且右侧有更多内容。

我已经找到了一些解决方案，但它们都不适合我在这里使用过的flexbox技术。怎么能这样做得恰到好处呢？它需要花车吗？提前谢谢！

Answer 1

您可以使用以下技巧我已经创建了这个插件来展示它是如何工作的。 https://embed.plnkr.co/XzDEedEsgS1hDDmVuccZ/

import tkinter as tk

lots_of_text = """Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Donec a rhoncus elit, ac mattis quam. Vestibulum ex enim, dictum
vitae finibus sed, pharetra ac tellus. Integer in mollis lectus.\n
ipsum nunc, venenatis sit amet augue mattis, faucibus blandit est.
Vestibulum vel porta lorem. Quisque pretium sodales velit, non molestie
rhoncus sed. Integer mattis eros nec porttitor auctor.
Vivamus porta faucibus mi ac interdum. Morbi lobortis ipsum venenatis,
fringilla justo vitae, dignissim elit."""

root = tk.Tk()
info = tk.Label(root, text=lots_of_text, justify='left')
info.pack()

root.mainloop()

在水平滚动的flex-box div

1 个答案: