Html 纯 css 中的水平时间线
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21916615/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Horizontal timeline in pure css
提问by faooful
I'm trying to make a timeline in pure CSS however I seem to be running into some problems.
我正在尝试用纯 CSS 制作时间线，但是我似乎遇到了一些问题。
When I try to set the timeline div as overflow-x: scroll it still scrolls on the y access.
当我尝试将时间线 div 设置为 overflow-x: scroll 它仍然在 y 访问上滚动。
This is what I've got:
这就是我所拥有的：
#timeline {
height: 500px;
width: auto;
margin: 0;
background: red;
}
.event {
height: 500px;
}
.founded {
width: 400px;
float: left;
background: blue;
}
.grant {
width: 800px;
background: yellow;
}<ol id="timeline">
<li class="event founded"></li>
<li class="event grant"></li>
</ol>I just want each additional entry to follow the previous one and for it all be scroll-able horizontally. If anyone could point me in the right direction that would be amazing.
我只希望每个附加条目都跟随前一个条目，并且所有条目都可以水平滚动。如果有人能指出我正确的方向，那就太棒了。
Thanks.
谢谢。
回答by kthornbloom
I literally JUST had to make one of these. This is what I came up with:
我真的只需要制作其中之一。这就是我想出的：
body {
padding: 25px;
font-family: sans-serif;
}
.timeline {
white-space: nowrap;
overflow-x: scroll;
padding: 30px 0 10px 0;
position: relative;
}
.entry {
display: inline-block;
vertical-align: top;
background: #13519C;
color: #fff;
padding: 10px;
font-size: 12px;
text-align: center;
position: relative;
border-top: 4px solid #06182E;
border-radius: 3px;
min-width: 200px;
max-width: 500px;
}
.entry img {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
.entry:after {
content: '';
display: block;
background: #eee;
width: 7px;
height: 7px;
border-radius: 6px;
border: 3px solid #06182E;
position: absolute;
left: 50%;
top: -30px;
margin-left: -6px;
}
.entry:before {
content: '';
display: block;
background: #06182E;
width: 5px;
height: 20px;
position: absolute;
left: 50%;
top: -20px;
margin-left: -2px;
}
.entry h1 {
color: #fff;
font-size: 18px;
font-family: Georgia, serif;
font-weight: bold;
margin-bottom: 10px;
}
.entry h2 {
letter-spacing: .2em;
margin-bottom: 10px;
font-size: 14px;
}
.bar {
height: 4px;
background: #eee;
width: 100%;
position: relative;
top: 13px;
left: 0;
}<div class="bar"></div>
<div class="timeline">
<div class="entry">
<h1>1990</h1>
<h2>Entry Title</h2>
<img src="http://dummyimage.com/300x200/000/fff" /> Here's the info about this date
</div>
<div class="entry">
<h1>1995</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2000</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2005</h1>
Here's the info about this date
</div>
<div class="entry">
<h1>2010</h1>
Here's the info about this date
</div>
</div>回答by Srikrushna
You can refer the below link also
您也可以参考以下链接
@import url(https://fonts.googleapis.com/css?family=Dosis:500);
body{
background: #F1F1F1;
}
.container{
width: 1200px;
margin: auto;
}
.timeline{
counter-reset: year 2016;
position: relative;
}
.timeline li{
list-style: none;
float: left;
width: 33.3333%;
position: relative;
text-align: center;
text-transform: uppercase;
font-family: 'Dosis', sans-serif;
}
ul:nth-child(1){
color: #4caf50;
}
.timeline li:before{
counter-increment: year;
content: counter(year);
width: 50px;
height: 50px;
border: 3px solid #4caf50;
border-radius: 50%;
display: block;
text-align: center;
line-height: 50px;
margin: 0 auto 10px auto;
background: #F1F1F1;
color: #000;
transition: all ease-in-out .3s;
cursor: pointer;
}
.timeline li:after{
content: "";
position: absolute;
width: 100%;
height: 1px;
background-color: grey;
top: 25px;
left: -50%;
z-index: -999;
transition: all ease-in-out .3s;
}
.timeline li:first-child:after{
content: none;
}
.timeline li.active{
color: #555555;
}
.timeline li.active:before{
background: #4caf50;
color: #F1F1F1;
}
.timeline li.active + li:after{
background: #4caf50;
}<h1><a href="http://developerstips.com/">DevelopersTips</a></h1>
<div class="container">
<ul class="timeline">
<li class="active">Bacon</li>
<li>Rib</li>
<li>Sausage</li>
</ul>
</div>