html - 滚动 div 容器不显示所有列表项
问题描述
我有一个包含时间线的水平可滚动 div。但是,当您一直滚动到左侧时,它不会显示前 ~8 个列表项。我不知道为什么。下面是我的 JSbin。
JSBIN:https ://codepen.io/nerdy-droid/pen/eYmVBeJ
这是我正在使用的 CSS:
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
}
.li {
transition: all 200ms ease-in;
}
.timestamp {
margin-bottom: 20px;
padding: 0px 40px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 100;
}
.status {
padding: 0px 40px;
display: flex;
justify-content: center;
border-top: 2px solid #D6DCE0;
position: relative;
transition: all 200ms ease-in;
}
.status h4 {
font-weight: 600;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #ddd;
position: absolute;
top: -15px;
left: 42%;
transition: all 200ms ease-in;
}
.li.complete .status {
border-top: 2px solid #66DC71;
}
.li.complete .status:before {
background-color: #66DC71;
border: none;
transition: all 200ms ease-in;
}
.li.complete .status h4 {
color: #66DC71;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
.status:before {
left: -8%;
top: 30%;
transition: all 200ms ease-in;
}
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-family: "Titillium Web", sans serif;
color: #758D96;
}
button {
position: absolute;
width: 100px;
min-width: 100px;
padding: 20px;
margin: 20px;
font-family: "Titillium Web", sans serif;
border: none;
color: white;
font-size: 16px;
text-align: center;
}
#toggleButton {
position: absolute;
left: 50px;
top: 20px;
background-color: #75C7F6;
}
.outer {
width: 500px;
height: 300px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
这是HTML:
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="outer">
<ul class="timeline" id="timeline">
<li class="li complete">
<div class="timestamp">
<span class="author">First One</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> First One</h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Last One</h4>
</div>
</li>
</ul>
</div>
提前致谢!
解决方案
.timeline {
list-style-type: none;
display: flex;
align-items: center;
justify-content: flex-start;
}
.li {
transition: all 200ms ease-in;
}
.timestamp {
margin-bottom: 20px;
padding: 0px 40px;
display: flex;
flex-direction: column;
align-items: center;
font-weight: 100;
}
.status {
padding: 0px 40px;
display: flex;
justify-content: center;
border-top: 2px solid #D6DCE0;
position: relative;
transition: all 200ms ease-in;
}
.status h4 {
font-weight: 600;
}
.status:before {
content: "";
width: 25px;
height: 25px;
background-color: white;
border-radius: 25px;
border: 1px solid #ddd;
position: absolute;
top: -15px;
left: 42%;
transition: all 200ms ease-in;
}
.li.complete .status {
border-top: 2px solid #66DC71;
}
.li.complete .status:before {
background-color: #66DC71;
border: none;
transition: all 200ms ease-in;
}
.li.complete .status h4 {
color: #66DC71;
}
@media (min-device-width: 320px) and (max-device-width: 700px) {
.timeline {
list-style-type: none;
display: block;
}
.li {
transition: all 200ms ease-in;
display: flex;
width: inherit;
}
.timestamp {
width: 100px;
}
.status:before {
left: -8%;
top: 30%;
transition: all 200ms ease-in;
}
}
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
font-family: "Titillium Web", sans serif;
color: #758D96;
}
.outer {
width: 500px;
height: 300px;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<div class="outer">
<ul class="timeline" id="timeline">
<li class="li complete">
<div class="timestamp">
<span class="author">First One</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> First One</h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> First Shown - but not first entry </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Shift Completed </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Abhi Sharma</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Shift Created </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">PAM Admin</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> Email Sent </h4>
</div>
</li>
<li class="li complete">
<div class="timestamp">
<span class="author">Aaron Rodgers</span>
<span class="date">11/15/2014<span>
</div>
<div class="status">
<h4> SIC Approval </h4>
</div>
</li>
<li class="li">
<div class="timestamp">
<span class="author">PAM Admin PAM Admin</span>
<span class="date">TBD<span>
</div>
<div class="status">
<h4> Last One</h4>
</div>
</li>
</ul>
</div>
将类时间轴的 justify-content 的值从 center 更改为 flex-start。
.timeline { list-style-type: none; display: flex; align-items: center; justify-content: flex-start;}
推荐阅读
- python - 将代码更改为函数并在它们之间传递变量?
- python - 全局可变与不可变
- rust - 如何返回具有多个生命周期的 impl Iterator?
- swift - 来自外部库的 Swift 函数未导入
- azure - Azure 逻辑应用 twitter 触发器不起作用
- jquery - 离开主页后,有没有办法记住众多按钮之一的点击状态?
- javascript - 正则表达式删除所有前导和尾随特殊字符?
- javascript - 需要将图像的 HTML ID 传递给 javascript 中的变量以在各种功能中使用
- google-apps-script - 使用 Google Apps 脚本通过 HTML 表单将文件上传到 Google 云端硬盘而不使用 JavaScript
- linux - 如何在不丢失进程状态的情况下使 VM 休眠并在新机器上启动它?