在串列的情況下洗掉垂直邊框線的最后一部分

我正在創建一個時間線組件，為此我試圖復制設計。我幾乎完成了這一點，但有一部分我完全卡住了。我想洗掉垂直邊界線的最后一部分。

Attaching my code for further reference: 

    https://codepen.io/ashish-yourphysio/pen/qBpVqpZ

uj5u.com熱心網友回復：

我注意到你有這個類timeline-end，所以你應該能夠簡單地將邊框屬性重置為其初始值：

.timeline-end {
  border: initial;
}

請記住在其他規則之后添加此規則，以免被覆寫！

片段：

顯示代碼片段

.timeline {
  list-style: none;
  margin: 25px 0 22px;
  padding: 0;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-horizontal:after {
  border-top-width: 6px;
  border-left-width: 13px;
  border-color: transparent transparent transparent #00637d;
  top: 15px;
  right: 0;
  bottom: auto;
  left: auto;
}

.timeline-horizontal .timeline-milestone {
  border-top: 2px solid #00637d;
  display: inline;
  float: left;
  margin: 20px 0 0 0;
  padding: 40px 0 0 0;
}

.timeline-horizontal .timeline-milestone:before {
  top: -17px;
  left: auto;
}

.timeline-horizontal .timeline-milestone.is-completed:after {
  top: -17px;
  left: 0;
}

.timeline-milestone {
  border-left: 2px solid #00637d;
  margin: 0 0 0 20px;
  padding: 0 0 5px 25px;
  position: relative;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-milestone:before {
  border: 7px solid #00637d;
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  left: -17px;
  width: 32px;
  height: 32px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-milestone.is-completed:before {
  background-color: #00637d;
}

.timeline-milestone.is-completed:after {
  color: #FFF;
  content: "\f00c";
  display: block;
  font-family: "FontAwesome";
  line-height: 32px;
  position: absolute;
  top: 0;
  left: -17px;
  text-align: center;
  width: 32px;
  height: 32px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.timeline-milestone.is-current:before {
  background-color: #EEE;
}

.timeline-milestone.is-future:before {
  background-color: #8DACB8;
  border: 0;
}

.timeline-milestone.is-future .timeline-action .title {
  color: #8DACB8;
}

.timeline-action {
  background-color: #FFF;
  padding: 12px 10px 12px 20px;
  position: relative;
  top: -15px;
}

.timeline-action.is-expandable .title {
  cursor: pointer;
  position: relative;
}

.timeline-action.is-expandable .title:focus {
  outline: 0;
  text-decoration: underline;
}

.timeline-action.is-expandable .title:after {
  border: 6px solid #666;
  border-color: transparent transparent transparent #666;
  content: "";
  display: block;
  position: absolute;
  top: 6px;
  right: 0;
}

.timeline-action.is-expandable .content {
  display: none;
}

.timeline-action.is-expandable.is-expanded .title:after {
  border-color: #666 transparent transparent transparent;
  top: 10px;
  right: 5px;
}

.timeline-action.is-expandable.is-expanded .content {
  display: block;
}

.timeline-action .title,
.timeline-action .content {
  word-wrap: break-word;
}

.timeline-action .title {
  color: #00637d;
  font-size: 18px;
  margin: 0;
}

.timeline-action .date {
  display: block;
  font-size: 14px;
  margin-bottom: 15px;
}

.timeline-action .content {
  font-size: 14px;
}

.file-list {
  line-height: 1.4;
  list-style: none;
  padding-left: 10px;
}

body {
  background-color: #EEE;
  font-family: Helvetica, Arial, Verdana, sans-serif;
}

.page {
  max-width: 1200px;
  margin: 40px 30px;
}

a {
  color: #00637d;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

.timeline-end {
  border: initial;
}

<article class="page">
  <h1>Journey Status</h1>
  <ul class="timeline">
    <li class="timeline-milestone is-completed timeline-start">
      <div class="timeline-action">
        <h2 class="title">Begin</h2>
        <span class="date">First quarter 2022</span>
        <div class="content">
          We will have a small kickoff
        </div>
      </div>
    </li>
    <li class="timeline-milestone is-current">
      <div class="timeline-action">
        <h2 class="title">Initial planning</h2>
        <span class="date">Second quarter 2022</span>
        <div class="content">
          <ul class="file-list">
            <li><a href="example/video" class="video-link">Introduction video</a></li>
            <li><a href="example.pdf">Project Plan, pdf 2,8 MB</a></li>
          </ul>
        </div>
      </div>
    </li>
    <li class="timeline-milestone is-future">
      <div class="timeline-action">
        <h2 class="title">Start construction</h2>
        <span class="date">Fourth quarter 2022</span>
        <div class="content">

        </div>
      </div>
    </li>
    <li class="timeline-milestone is-future timeline-end">
      <div class="timeline-action">
        <h2 class="title">Test and verify</h2>
        <span class="date">Second quarter 2022</span>
        <div class="content">

        </div>
      </div>
    </li>
  </ul>
</article>

標籤：html css

上一篇：為什么在將位置從固定更改為靜態時我的元素會移動？

下一篇：如何使div增長以適應其內容，直到父容器的最大大小？