html - 如何使用 HTML 和 CSS 将现有列表元素放置在时间轴上？-6ren

html - 如何使用 HTML 和 CSS 将现有列表元素放置在时间轴上？

转载作者：行者123 更新时间：2023-11-28 15:35:36

我正在尝试构建一个类似于下图所示的时间轴: Example Timeline 我遇到的困难是构建时间线的底部，其中图标由一条线连接，以及将三 Angular 形添加到每个事件的底部。这是目前我的代码:

.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>

我列表中的第一个列表元素是我尝试添加一个三 Angular 形和一个图标，但我不知道如何将三 Angular 形定位在底部边框上，以及如何将图标直接定位在三 Angular 形下方，在图标之间使用水平线或其他线。

最佳答案

三 Angular 形被应用为一个伪元素::after。图像与 block 对齐 - 操作起来会容易得多。将 ScrollView 固定为仅在 X 轴上滚动，而不是在 Y 轴上滚动。该线是 ScrollView 外部的对象，否则它的长度将限制在可见区域并随 View 向左滚动。

.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>

关于html - 如何使用 HTML 和 CSS 将现有列表元素放置在时间轴上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44187387/

文章推荐： ios - 滚动到新页面时，将旧页面上的视频设置为 0.0 秒

文章推荐： javascript - 如何使用 JavaScript 或 jQuery 启用按钮

文章推荐： swift - 在 Swift 中更改初始游戏场景

文章推荐： javascript - 从对象数组中删除对象属性的函数

r - 现有 R 图中的子图
我有一个如下图所示的情节。对于这个情节，我想在情节(右下角或左下角)的某处添加类似的线图。我正在使用的子图的命令是 plot( 1:121, sample(1:121),type='l' ) 它绘制在
sql - 现有 SQL 数据库的规范化
我有一个单表数据库，我继承并迁移到 SQL Server，然后通过创建、链接和填充一大堆表示主表中项目的查找类型表来规范化它。我现在想用它们的外键替换原始表中的那些项目。我是不是一直在写一堆查询或 U
javascript - 在浏览器中编辑*现有* PDF
我有一个 Web 应用程序，它当前正在从服务器获取 PDF 的 base64 表示。我可以使用 Mozilla 的 pdf.js 在上显示它并使用下拉菜单切换页面。根据我所能找到的一切和Can
sql - 现有 DB2 列报告为不是表的列
在 DB2 上运行的 Moodle 2 安装中，删除用户不成功，返回从数据库读取错误: Debug info: [IBM][CLI Driver][DB2/LINUXX8664] SQL0206N "
grails - 现有 Controller 网址的HTTP状态404
我在grails项目的RH包中添加了一个名为Authorization的新域类。然后，我从grails菜单自动生成了 Controller 和 View 。但是当我尝试输入 Controller
plunker - 现有 Plunker 的副本
今天，我发现了一个有趣的plunker，经过谷歌大量搜索后一无所获，希望我能在这里找到答案。我只是想要那个笨蛋的副本。我不想使用复制和粘贴技术。有什么方法可以获取已建立的 plunk 的副本吗？我如何
ios - 现有 sqlite 数据库的核心数据
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: Migrate normal sqlite3 database to core data? 是否可以将现有的 sql
java - 现有 list (构建错误)
我正在尝试在我的应用程序上添加启动画面。我干净地构建了程序，但我选择了错误的文件。现在我第二次编辑了 VM 选项并再次干净构建，现在我收到此错误: C:\Users\User\Documents\Ne
ios - 现有 CollectionView 图像在滚动时发生变化
我已经查看了很多问题，我不相信这是重复使用单元格的结果，因为新的单元格图像是正确的，但是现有的单元格图像不正确并且曾经是正确的。我会先发布图片，以便更容易理解问题。我有一个图像单元的 Collect
java - 现有 key 的哈希表为空
我在来自 Vaadin 的 ContainerHierarchicalWrapper 的这段代码中有一个非常奇怪的错误: for (Object object : children.keySet())
javascript - 现有 JavaScript 应用程序的国际化和本地化
到目前为止，我正在使用 Globalize用于我的 JavaScript 应用程序的 i18n 和 l10n(使用 jQuery UI 构建)。这行得通，但它将我的代码与另一个特定的库联系在一起。现在
现有 JHipster 项目中的 Elasticsearch
我正在创建一个 JHipster 应用程序，现在确定了 full text search 的必要性.我知道 JHipster 与 Elasticseach 集成，但我在创建项目时没有启用它。有没有一种
mysql - 现有 mysql 表或单独表中的附加字段
我一直在寻找堆栈中的建议，但我仍然不能 100% 确定改进它的最佳方法。我有一个存储大约 130K 条记录的 mysql INNODB“产品”表。杂项产品数据等大约有 80 个字段，然后我们一直在为每
c++ - 使用另一个(现有)对象创建新对象时会发生什么？
我在一本书上看到，它说:当我们使用另一个初始化新创建的对象时 - 使用复制构造函数创建一个临时对象，然后使用赋值运算符将值复制到新对象! 后来在书中我读到:当使用另一个对象初始化新对象时，编译器创建一
python - 现有 Django 项目中的语法错误
我第一次安装现有的 Django 项目时遇到了启动服务器 python manage.py runserver 的问题这是我做的 1.克隆仓库， 2.制作虚拟环境 3.pip安装要求.txt 4.生
html - 现有 linux 用户登录网站
我有一个网站，还有一个登录表单。我不想使用 PHP 来检查我的 MySQL 数据库，因此我正在寻找一种方法来检查用户凭据以查看是否已有 Linux 用户。我知道 PAM，但我还没有找到任何有关如何从网
c# - 现有 Umbraco 项目的开发
我有一个现有的 Umbraco 项目在 IIS 服务器上运行。当我开始这个项目时，我基本上是将 Umbraco 直接安装到服务器上，并通过管理界面进行编码，直到网站启动并上线。现在，客户想要一些更改
android - 现有 Android 虚拟设备列表为空
我是 Android 开发新手，目前正在学习一些教程。当我在 Eclipse 中设置一个新的 Android 项目，并选择 Windows -> Android SDK and AVD Manager
java - 有效(现有)电子邮件地址验证
我有这个注册页面可以正常工作，但对于电子邮件字段，我需要确保电子邮件正确有效1:正确2 : 有效为了正确添加电子邮件，我正在使用 Java 脚本验证来维护abc@def.com 很好用但我的问题是
c# - 现有 COM 引用或添加新引用时出错
首先让我说我不熟悉 COM 引用，并且我在 Windows 7 64 位计算机上使用 VS2010。今天早上，我从 TFS 中删除了一个现有项目。然后我尝试构建项目并收到此错误: The type o

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何使用 HTML 和 CSS 将现有列表元素放置在时间轴上？