基于内容的可滚动垂直导航栏

Anna_B 发表于 Dev

安娜_B

我这里有一个垂直导航栏。经过一些帮助，它看起来仍然有些怪异。flexbox的想法很好，但是整个导航已经在flexbox中了。因此，现在还不完全应该怎么做。为什么文字要换行？为什么在框外有文字？

这是代码：

.content {
display: flex;
}

.column {
height: 100vh;
background: darkgrey;
}

.column_content {
overflow-y: scroll;
height: 100%;
width: 100%;
padding: 10px;
}

nav {
border-left: 2px solid black;
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}

nav ul {
display: flex;
flex-direction: row;
}

nav ul li {
margin-bottom: 20px;
}

<div class="content">

<div class="column">
<div class="column_content">
Text
</div>
</div>

<nav class="column">
<div class="column_content">
<ul>
<li>Link eins</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</nav>

</div>

感谢帮助！<3

Manjuboyz

您可以使用flex-direction: row;列表，这将使列表始终处于滚动状态。

body,
html {
  margin: 0;
  padding: 0;
  /*height: 800vh;*/
}

nav {
  float: right;
  border-left: 2px solid black;
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  background: darkgrey;
}

ul {
  display: flex;
  /* use this */
  flex-direction: row;
  /* use this */
}

nav li {
  float: left;
  margin-bottom: 20px;
}

<nav>
  <ul>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
  </ul>
</nav>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。