问题描述
在网站https://www.app-iam.com的“功能”部分下,我正在使用ol标签列出所有功能。但是,当我扩展列表时,列表向上扩展。我希望列表向下扩展。该怎么办?
ol {
list-style: none;
color: coral;
}
ol li {
font-size: 34px;
position: relative;
margin-bottom: 20px;
border-bottom: 1px solid #ebebeb;
}
li span {
position: absolute;
line-height: 25px;
font-weight: 600;
}
<ol>
<li>
<span>Feature 1</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 2</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 3</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 4</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
</ol>
This is what the screen looks like. You can see that there are two scroll bars because the list is extending upwards. 我希望使列表向下扩展,以使滚动条之一消失而列表向下扩展。
任何帮助将不胜感激!
解决方法
您可以在flex
标签上使用flex-direction: column-reverse;
和ol
,这将颠倒您的列表顺序
ol {
list-style: none;
display: flex;
color: coral;
flex-direction: column-reverse;
}
ol li {
font-size: 34px;
position: relative;
margin-bottom: 20px;
border-bottom: 1px solid #ebebeb;
}
li span {
position: absolute;
line-height: 25px;
font-weight: 600;
}
<ol>
<li>
<span>Feature 1</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 2</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 3</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 4</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
<li>
<span>Feature 5</span>
<p>Descriptions go here hadkfnklasnvkjasndjnkj nhvkadskhsdkljfnlj asfdlhkl kasflks klcshdajkdh kasdfda</p>
</li>
</ol>