时间戳

首页 > 解决方案 > 基于内容的可滚动垂直导航栏

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

问题描述

我这里有一个垂直导航栏。在一些帮助之后，它看起来仍然有点奇怪。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

标签： htmlcss

解决方案

您可以使用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>

推荐阅读