[英]how to center a timeline with css in ionic 4
I'm a not a css expert, I found a timeline template built by css and html, I want to use it in my ionic app, the problem is the time line is display in the middle of the Card(page), but I want to display it on the left of the Card(Page), can anyone help please.我不是 css 专家,我找到了一个由 css 和 html 构建的时间轴模板,我想在我的 ionic 应用程序中使用它,问题是时间线显示在卡片(页面)的中间,但是我想将它显示在卡片(页面)的左侧,有人可以帮忙吗?
the image looks like this: enter image description here图像如下所示:在此处输入图像描述
but the result what I'm looking for is this : enter image description here但我正在寻找的结果是:在此处输入图像描述
Html code : html代码:
<ion-card>
<ion-card-header>
<ion-card-subtitle>Card Subtitle</ion-card-subtitle>
<ion-card-title>Card Title</ion-card-title>
</ion-card-header>
<ion-card-content>
<div>
<ul class="timeline">
<!-- Item 1 -->
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Freelancer</span>
<span class="time-wrapper"><span class="time">2013 - present</span></span>
</div>
</div>
</li>
<!-- Item 2 -->
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Apple Inc.</span>
<span class="time-wrapper"><span class="time">2011 - 2013</span></span>
</div>
</div>
</li>
<!-- Item 3 -->
<li>
<div class="direction-r">
<div class="flag-wrapper">
<span class="flag">Harvard University</span>
<span class="time-wrapper"><span class="time">2008 - 2011</span></span>
</div>
</div>
</li>
</ul>
</div>
</ion-card-content>
</ion-card>
CSS CODE:代码:
/* ================ The Timeline ================ */
.timeline {
position: relative;
width: 660px;
margin: 0 auto;
margin-top: 20px;
padding: 1em 0;
list-style-type: none;
}
.timeline:before {
position: absolute;
left: 50%;
top: 0;
content: " ";
display: block;
width: 6px;
height: 100%;
margin-left: -3px;
background: rgb(80, 80, 80);
background: -moz-linear-gradient(
top,
rgba(80, 80, 80, 0) 0%,
rgb(80, 80, 80) 8%,
rgb(80, 80, 80) 92%,
rgba(80, 80, 80, 0) 100%
);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, rgba(30, 87, 153, 1)),
color-stop(100%, rgba(125, 185, 232, 1))
);
background: -webkit-linear-gradient(
top,
rgba(80, 80, 80, 0) 0%,
rgb(80, 80, 80) 8%,
rgb(80, 80, 80) 92%,
rgba(80, 80, 80, 0) 100%
);
background: -o-linear-gradient(
top,
rgba(80, 80, 80, 0) 0%,
rgb(80, 80, 80) 8%,
rgb(80, 80, 80) 92%,
rgba(80, 80, 80, 0) 100%
);
background: -ms-linear-gradient(
top,
rgba(80, 80, 80, 0) 0%,
rgb(80, 80, 80) 8%,
rgb(80, 80, 80) 92%,
rgba(80, 80, 80, 0) 100%
);
background: linear-gradient(
to bottom,
rgba(80, 80, 80, 0) 0%,
rgb(80, 80, 80) 8%,
rgb(80, 80, 80) 92%,
rgba(80, 80, 80, 0) 100%
);
z-index: 5;
}
.timeline li {
padding: 1em 0;
}
.timeline li:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.direction-l {
position: relative;
width: 300px;
float: left;
text-align: right;
}
.direction-r {
position: relative;
width: 300px;
float: right;
}
.flag-wrapper {
position: relative;
display: inline-block;
text-align: center;
}
.flag {
position: relative;
display: inline;
background: rgb(248, 248, 248);
padding: 6px 10px;
border-radius: 5px;
font-weight: 600;
text-align: left;
}
.direction-l .flag {
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
.direction-r .flag {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15),
0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
.direction-l .flag:before,
.direction-r .flag:before {
position: absolute;
top: 50%;
right: -40px;
content: " ";
display: block;
width: 12px;
height: 12px;
margin-top: -10px;
background: #fff;
border-radius: 10px;
border: 4px solid rgb(255, 80, 80);
z-index: 10;
}
.direction-r .flag:before {
left: -40px;
}
.direction-l .flag:after {
content: "";
position: absolute;
left: 100%;
top: 50%;
height: 0;
width: 0;
margin-top: -8px;
border: solid transparent;
border-left-color: rgb(248, 248, 248);
border-width: 8px;
pointer-events: none;
}
.direction-r .flag:after {
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 0;
width: 0;
margin-top: -8px;
border: solid transparent;
border-right-color: rgb(248, 248, 248);
border-width: 8px;
pointer-events: none;
}
.time-wrapper {
display: inline;
line-height: 1em;
font-size: 0.66666em;
color: rgb(250, 80, 80);
vertical-align: middle;
}
.direction-l .time-wrapper {
float: left;
}
.direction-r .time-wrapper {
float: right;
}
.time {
display: inline-block;
padding: 4px 6px;
background: rgb(248, 248, 248);
}
.desc {
margin: 1em 0.75em 0 0;
font-size: 0.77777em;
font-style: italic;
line-height: 1.5em;
}
.direction-r .desc {
margin: 1em 0 0 0.75em;
}
/* ================ Timeline Media Queries ================ */
@media screen and (max-width: 660px) {
.timeline {
width: 100%;
padding: 4em 0 1em 0;
}
.timeline li {
padding: 2em 0;
}
.direction-l,
.direction-r {
float: none;
width: 100%;
text-align: center;
}
.flag-wrapper {
text-align: center;
}
.flag {
background: rgb(255, 255, 255);
z-index: 15;
}
.direction-l .flag:before,
.direction-r .flag:before {
position: absolute;
top: -30px;
left: 50%;
content: " ";
display: block;
width: 12px;
height: 12px;
margin-left: -9px;
background: #fff;
border-radius: 10px;
border: 4px solid rgb(255, 80, 80);
z-index: 10;
}
.direction-l .flag:after,
.direction-r .flag:after {
content: "";
position: absolute;
left: 50%;
top: -8px;
height: 0;
width: 0;
margin-left: -8px;
border: solid transparent;
border-bottom-color: rgb(255, 255, 255);
border-width: 8px;
pointer-events: none;
}
.time-wrapper {
display: block;
position: relative;
margin: 4px 0 0 0;
z-index: 14;
}
.direction-l .time-wrapper {
float: none;
}
.direction-r .time-wrapper {
float: none;
}
.desc {
position: relative;
margin: 1em 0 0 0;
padding: 1em;
background: rgb(245, 245, 245);
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
z-index: 15;
}
.direction-l .desc,
.direction-r .desc {
position: relative;
margin: 1em 1em 0 1em;
padding: 1em;
z-index: 15;
}
}
remove margin:0 auto
for .timeline
删除margin:0 auto
为.timeline
.timeline {
position: relative;
width: 660px;
/*margin: 0 auto;*/ /*Remove this*/
margin-top: 20px;
padding: 1em 0;
list-style-type: none;
}
I hope this is what you are expecting.我希望这是你所期待的。 Changes:变化:
.timeline {
position: relative;
width: 350px; /*change the width */
/* margin: 0 auto;*/ /*remove this property */
margin-top: 20px;
padding: 1em 0;
list-style-type: none;
}
.timeline:before {
position: absolute;
left: 20px; /*change this to 20px */
top: 0;
content: " ";
display: block;
width: 6px;
height: 100%;
margin-left: -3px;
background: rgb(80, 80, 80);
background: -moz-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -o-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -ms-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: linear-gradient( to bottom, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
z-index: 5;
}
And then remove all the media queries.然后删除所有媒体查询。
Just use this modified css:只需使用这个修改过的css:
.timeline {
position: relative;
width: 350px;
margin-top: 20px;
padding: 1em 0;
list-style-type: none;
}
.timeline:before {
position: absolute;
left: 20px;
top: 0;
content: " ";
display: block;
width: 6px;
height: 100%;
margin-left: -3px;
background: rgb(80, 80, 80);
background: -moz-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -o-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: -ms-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
background: linear-gradient( to bottom, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%);
z-index: 5;
}
.timeline li {
padding: 1em 0;
}
.timeline li:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.direction-l {
position: relative;
width: 300px;
float: left;
text-align: right;
}
.direction-r {
position: relative;
width: 300px;
float: right;
}
.flag-wrapper {
position: relative;
display: inline-block;
text-align: center;
}
.flag {
position: relative;
display: inline;
background: rgb(248, 248, 248);
padding: 6px 10px;
border-radius: 5px;
font-weight: 600;
text-align: left;
}
.direction-l .flag {
-webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
.direction-r .flag {
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15);
}
.direction-l .flag:before,
.direction-r .flag:before {
position: absolute;
top: 50%;
right: -40px;
content: " ";
display: block;
width: 12px;
height: 12px;
margin-top: -10px;
background: #fff;
border-radius: 10px;
border: 4px solid rgb(255, 80, 80);
z-index: 10;
}
.direction-r .flag:before {
left: -40px;
}
.direction-l .flag:after {
content: "";
position: absolute;
left: 100%;
top: 50%;
height: 0;
width: 0;
margin-top: -8px;
border: solid transparent;
border-left-color: rgb(248, 248, 248);
border-width: 8px;
pointer-events: none;
}
.direction-r .flag:after {
content: "";
position: absolute;
right: 100%;
top: 50%;
height: 0;
width: 0;
margin-top: -8px;
border: solid transparent;
border-right-color: rgb(248, 248, 248);
border-width: 8px;
pointer-events: none;
}
.time-wrapper {
display: inline;
line-height: 1em;
font-size: 0.66666em;
color: rgb(250, 80, 80);
vertical-align: middle;
}
.direction-l .time-wrapper {
float: left;
}
.direction-r .time-wrapper {
float: right;
}
.time {
display: inline-block;
padding: 4px 6px;
background: rgb(248, 248, 248);
}
.desc {
margin: 1em 0.75em 0 0;
font-size: 0.77777em;
font-style: italic;
line-height: 1.5em;
}
.direction-r .desc {
margin: 1em 0 0 0.75em;
}
.timeline { position: relative; width: 350px; margin-top: 20px; padding: 1em 0; list-style-type: none; } .timeline:before { position: absolute; left: 20px; top: 0; content: " "; display: block; width: 6px; height: 100%; margin-left: -3px; background: rgb(80, 80, 80); background: -moz-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%); background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(100%, rgba(125, 185, 232, 1))); background: -webkit-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%); background: -o-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%); background: -ms-linear-gradient( top, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%); background: linear-gradient( to bottom, rgba(80, 80, 80, 0) 0%, rgb(80, 80, 80) 8%, rgb(80, 80, 80) 92%, rgba(80, 80, 80, 0) 100%); z-index: 5; } .timeline li { padding: 1em 0; } .timeline li:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .direction-l { position: relative; width: 300px; float: left; text-align: right; } .direction-r { position: relative; width: 300px; float: right; } .flag-wrapper { position: relative; display: inline-block; text-align: center; } .flag { position: relative; display: inline; background: rgb(248, 248, 248); padding: 6px 10px; border-radius: 5px; font-weight: 600; text-align: left; } .direction-l .flag { -webkit-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); } .direction-r .flag { -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.15); } .direction-l .flag:before, .direction-r .flag:before { position: absolute; top: 50%; right: -40px; content: " "; display: block; width: 12px; height: 12px; margin-top: -10px; background: #fff; border-radius: 10px; border: 4px solid rgb(255, 80, 80); z-index: 10; } .direction-r .flag:before { left: -40px; } .direction-l .flag:after { content: ""; position: absolute; left: 100%; top: 50%; height: 0; width: 0; margin-top: -8px; border: solid transparent; border-left-color: rgb(248, 248, 248); border-width: 8px; pointer-events: none; } .direction-r .flag:after { content: ""; position: absolute; right: 100%; top: 50%; height: 0; width: 0; margin-top: -8px; border: solid transparent; border-right-color: rgb(248, 248, 248); border-width: 8px; pointer-events: none; } .time-wrapper { display: inline; line-height: 1em; font-size: 0.66666em; color: rgb(250, 80, 80); vertical-align: middle; } .direction-l .time-wrapper { float: left; } .direction-r .time-wrapper { float: right; } .time { display: inline-block; padding: 4px 6px; background: rgb(248, 248, 248); } .desc { margin: 1em 0.75em 0 0; font-size: 0.77777em; font-style: italic; line-height: 1.5em; } .direction-r .desc { margin: 1em 0 0 0.75em; }
<ion-card> <ion-card-header> <ion-card-subtitle>Card Subtitle</ion-card-subtitle> <ion-card-title>Card Title</ion-card-title> </ion-card-header> <ion-card-content> <div> <ul class="timeline"> <!-- Item 1 --> <li> <div class="direction-r"> <div class="flag-wrapper"> <span class="flag">Freelancer</span> <span class="time-wrapper"><span class="time">2013 - present</span></span> </div> </div> </li> <!-- Item 2 --> <li> <div class="direction-r"> <div class="flag-wrapper"> <span class="flag">Apple Inc.</span> <span class="time-wrapper"><span class="time">2011 - 2013</span></span> </div> </div> </li> <!-- Item 3 --> <li> <div class="direction-r"> <div class="flag-wrapper"> <span class="flag">Harvard University</span> <span class="time-wrapper"><span class="time">2008 - 2011</span></span> </div> </div> </li> </ul> </div> </ion-card-content> </ion-card>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.