如何使用HTML和CSS在時間軸上放置現有列表元素？

我試圖構建一個類似於下圖所示的時間線： Example Timeline 我遇到的困難是構建時間線的底部，它有一個圖標連接的單線，以及將三角形添加到每個事件的底部。這是目前我的代碼：如何使用HTML和CSS在時間軸上放置現有列表元素？

.navbar { 
 
    margin-bottom: 0px; 
 
} 
 

 
.jumbotron { 
 
    margin-bottom: 0px; 
 
} 
 

 
#timeline { 
 
    list-style: none; 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    padding-left: 0; 
 
} 
 

 
#timeline li { 
 
    display: inline-block; 
 
    padding: 1.5%; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    margin-top: 2%; 
 
    text-align: center; 
 
    padding-bottom: 0; 
 
    width: 45%; 
 
} 
 

 
#timeline li+li { 
 
    margin-left: 2%; 
 
} 
 

 
#timeline li h3, 
 
#timeline li em { 
 
    display: block; 
 
} 
 

 
#timeline_header { 
 
    padding-left: 0; 
 
} 
 

 
hr { 
 
    width: 100%; 
 
} 
 

 
#triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #757677; 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>My Website</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">LinkedIn</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="jumbotron text-center"> 
 
    <h1>Welcome!</h1> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12" id="timeline_header"> 
 
     <h1>What I've Been Up To</h1> 
 
     </div> 
 
    </div> 
 

 
    <!--Timeline--> 
 
    <div class="row" style="overflow:auto"> 
 
     <hr> 
 
     <ul id="timeline"> 
 
     <li> 
 
      <h2>Job #2</h2> 
 
      <em><h4>May 2016 - Present</h4></em> 
 
      <h3>Software Developer</h3> 
 
     </li> 
 
     <div id="triangle"></div> 
 
     <div class="timeline_icon"> 
 
      <img src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""></div> 
 

 
     <li> 
 
      <h2>Job #1</h2> 
 
      <em><h4>May 2012 - May 2016</h4></em> 
 
      <h3>Software Developer</h3> 
 
     </li> 
 

 
     <li> 
 
      <h2>Graduated from Colleg</h2> 
 
      <em><h4>May 2012</h4></em> 
 
      <h3>Bachelor's Degree</h3> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
    <hr> 
 

 
    <footer> 
 
    <p> Copyright &copy; 
 
     <!--Script displays the current year--> 
 
     <script type="text/javascript"> 
 
     var d = new Date() 
 
     document.write(d.getFullYear()) 
 
     </script> 
 
    </p> 
 
    </footer> 
 
</body> 
 

 
</html>

在我的列表中的第一個列表元素是我嘗試添加一個三角形和圖標的嘗試，但我無法弄清楚如何定位底部邊框上的三角形，以及如何在圖標之間使用水平線或其他線條將圖標直接放置在三角形下面。

來源

2017-05-25 bavenafu

該三角形應用爲僞元素:: after。圖像與塊對齊 - 操作起來會更容易。修正滾動視圖只能在X軸上滾動，而不在Y軸上滾動。該行是滾動視圖外部的對象，因爲否則它的長度限制在可見區域，並向左滾動視圖。

.navbar { 
 
    margin-bottom: 0px; 
 
} 
 

 
.jumbotron { 
 
    margin-bottom: 0px; 
 
} 
 

 
#timeline { 
 
    list-style: none; 
 
    padding-left: 0; 
 
    padding-top: 40px; 
 
    padding-bottom: 60px; 
 
    position: relative; 
 
} 
 

 
#timeline_border { 
 
    position: relative; 
 
    top: -123px; 
 
    display: block; 
 
    width: 100%; 
 
    height: 1px; 
 
    border-top: 2px solid #ccc; 
 
    z-index: -1; 
 
} 
 

 
#timeline li { 
 
    display: inline-block; 
 
    padding: 1.5%; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    margin-top: 2%; 
 
    text-align: center; 
 
    padding-bottom: 0; 
 
    width: 45%; 
 
    position: relative; 
 
} 
 

 
#timeline > li:after { 
 
    position: absolute; 
 
    bottom: -20px; 
 
    left: 40px; 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #757677; 
 
    display: block; 
 
    content: ""; 
 
} 
 

 
#timeline li+li { 
 
    margin-left: 2%; 
 
} 
 

 
#timeline li h3, 
 
#timeline li em { 
 
    display: block; 
 
} 
 

 
#timeline_header { 
 
    padding-left: 0; 
 
} 
 

 
hr { 
 
    width: 100%; 
 
} 
 

 
#triangle { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #757677; 
 
    display: inline-block; 
 
} 
 

 
.timeline_ruler { 
 
    white-space: nowrap; 
 
    overflow-x: scroll; 
 
    overflow-y: visible; 
 
    display: block; 
 
    height: auto; 
 
    padding-bottom: 100px; 
 
    
 
} 
 

 
.timeline_icon { 
 
    width: 80px; 
 
    height: 80px; 
 
    position: absolute; 
 
    bottom: -102px; 
 
    left: 20px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>My Website</title> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
    <link href="styles.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 

 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li><a href="#">LinkedIn</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="jumbotron text-center"> 
 
    <h1>Welcome!</h1> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-12" id="timeline_header"> 
 
     <h1>What I've Been Up To</h1> 
 
     </div> 
 
    </div> 
 

 
    <!--Timeline--> 
 
    <div class="row" style="overflow:auto"> 
 
     <hr> 
 
     <div class="timeline_ruler"> 
 
     <ul id="timeline"> 
 
     <li> 
 
      <h2>Job #2</h2> 
 
      <em><h4>May 2016 - Present</h4></em> 
 
      <h3>Software Developer</h3> 
 
      <img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""> 
 
     </li> 
 

 
     <li> 
 
      <h2>Job #1</h2> 
 
      <em><h4>May 2012 - May 2016</h4></em> 
 
      <h3>Software Developer</h3> 
 
      <img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""> 
 
     </li> 
 

 
     <li> 
 
      <h2>Graduated from Colleg</h2> 
 
      <em><h4>May 2012</h4></em> 
 
      <h3>Bachelor's Degree</h3> 
 
      <img class="timeline_icon" src="http://www.strohlsf.com/content/images/logos/logo_strohl_3.png" alt=""> 
 
     </li> 
 
     </ul> 
 
     
 
     
 
     
 
     </div> 
 
     <div id=timeline_border></div> 
 
      
 
    </div> 
 
    </div> 
 

 
    <hr> 
 

 
    <footer> 
 
    <p> Copyright &copy; 
 
     <!--Script displays the current year--> 
 
     <script type="text/javascript"> 
 
     var d = new Date() 
 
     document.write(d.getFullYear()) 
 
     </script> 
 
    </p> 
 
    </footer> 
 
</body> 
 

 
</html>

來源

2017-05-25 18:57:02

如何使用HTML和CSS在時間軸上放置現有列表元素？

回答

相關問題