简体   繁体   English

如何在ionic 4中使用css将时间线居中

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM