Question

有没有办法像导航栏一样medium.com可以在触摸设备中水平滚动。如果没有js，那么最好的方式就是requier，因为我需要用css清理它。

这是我有多远。但桌面浏览器中出现滚动条，而medium.com的导航栏则没有。

＆＃13;

ul {
  width: 300px;
  list-style: none;
  overflow-y: auto;
  white-space: nowrap;
}

ul li {
  display: inline;
  padding: 10px;
}

＆＃13;

<ul>
  <li>Home</li>
  <li>News</li>
  <li>Sports</li>
  <li>International</li>
  <li>Political</li>
  <li>TV News</li>
  <li>About</li>
  <li>Contact</li>
</ul>

＆＃13;

JSFiddle

Answer 1

您需要使用overflow-x。

CODEPEN

在您的代码之间添加此内容。这是为了响应式设计。

<meta name="viewport" content="width=device-width, initial-scale=1">

<强> CSS

ul {
  width: 300px;
  list-style: none;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #000;
  padding: 20px 10px;
}

ul li {
  display: inline;
  padding: 10px;
  color: #fff;
}

@media screen and (min-width: 768px) {
        ul {
            display: none;
        }
    }

<强> HTML

<ul>
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
  <li>Link 4</li>
  <li>Link 5</li>
  <li>Link 6</li>
  <li>Link 7</li>
  <li>Link 8</li>
  <li>Link 9</li>
  <li>Link 10</li>
</ul>

Answer 2

＆＃13;

ul {
  list-style: none;
  padding: 10px;
  width: 100%;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  overflow-y:hidden;
  overflow-x: scroll;
  display:inline-flex;
}

ul li {
  display: inline-block;
  padding: 5px;
}
ul li a{
text-decoration: none;
color: gray;
}
ul li a:hover{
color: black;
}

＆＃13;

<ul>
  <li><a href="home.html">Home</a></li>
  <li><a href="news.html">News</a></li>
  <li><a href="sports.html">Sports</a></li>
  <li><a href="international.html">International</a></li>
  <li><a href="political.html">Political</a></li>
  <li><a href="tvnews.html">TV </a></li>
  <li><a href="political.html">Political</a></li>
  <li><a href="tvnews.html">TV </a></li>
  <li><a href="political.html">Political</a></li>
  <li><a href="tvnews.html">TV </a></li>
  <li><a href="political.html">Political</a></li>
  <li><a href="tvnews.html">TV </a></li>
  <li><a href="home.html">Home</a></li>
  <li><a href="news.html">News</a></li>
  <li><a href="home.html">Home</a></li>
  <li><a href="news.html">News</a></li>
</ul>

＆＃13;

如何使像Navbar这样的Medium.com

2 个答案: