Javascript 带项目符号的HTML/CSS垂直分隔符

我只是想知道如何使用HTML/CSS获得这种UI设计：

应该是，每次用户输入新数据时，都会使用分隔符和项目符号显示数据

---

我对HTML/CSS方面的此类UI设计还不熟悉。

只需尝试以下链接：

2015-展示前端开发者

ulli{
显示：内联块；
填充物：5px；
边界：0；
右边框宽度：1px；
边框样式：实心；
}

菜单1


菜单2


菜单3

这太接近了。。我唯一能想到的是，你需要调整字体的固定大小，而且在移动设备上可能不太好看

HTML:

/*CSS:*/
身体{
字体系列：无衬线；
}
美丽的名单{
左边框：1px纯色灰色；
左侧填充：16px；
左边距：200px；
文本转换：大写；
}
美丽列表李{
列表样式：无；
}
美丽列表{
左侧填充：0px；
}
ul.pretty-list h4{
颜色：天蓝色；
位置：相对位置；
}
美国保险商实验室名单日期{
左边距：-216px；
宽度：184px；
文本对齐：右对齐；
右侧填充：1em；
浮动：左；
位置：相对位置；
}
美国保险商实验室名单日期：之后{
内容：“•”；
位置：绝对位置；
右：-10px；
宽度：21px；
字体大小：30px；
线高：18px；
文本对齐：居中；
}

2015年-现状1

分项1
分项2
分项3
分项4



2014-2015项目2

分项1
分项2
分项3
分项4

试试下面的代码片段。我不知道这是否是你需要的。此CSS基于简单的逻辑编写：

。全宽{
浮动：左；
宽度：100%；
显示器：flex；
}
.第一箱{
宽度：300px；
显示：内联块；
文本对齐：右对齐；
字体大小：15px；
右侧填充：15px；
}
.第二箱{
宽度：400px；
显示：内联块；
文本对齐：左对齐；
左侧填充：30px；
字体大小：15px；
左边框：2px实心#069；
位置：相对位置；
}
.第二个盒子：之后{
内容：“；
位置：绝对位置；
左：-8px；
顶部：8px；
背景：#900；
宽度：15px；
高度：15px；
边界半径：50%；
}
.第二个盒子h2、.第一个盒子h2{
保证金：0；
}

2015年至今
前端web开发人员
这里有东西

这里有东西

这里有东西

2015年至今
前端web开发人员
这里有东西

这里有东西

这里有东西

您可以试试这个。这是一个简单的结构

    <div class="abc">
      <div class="abc3">
        <div class="abc2">
          2016 - Present
          <span class="abc1"></span>
        </div>
        <div class="abc2">
          Front End Developer
        </div>
     </div>
     <div class="abc3">
       <div class="abc2"></div>
       <div class="abc2"></div>
     </div>
   </div>


<style>
.abc{
    display: table;
    background: grey;
    width: 350px;
    height: 450px;
    position: absolute;
    left: 250px;
    top: 150px;
    text-align: center;
}
.abc1{
    width: 20px;
    display: inline-block;
    height: 20px;
    position: relative;
    right: -42px;
    background: red;
    z-index: 100;
    border-radius: 50%;
}
.abc2 {
  display: table-cell;
  width: 50%;
  border-right: 1px solid blue;
}
.abc3{
   display: table-row;
}
</style>

2016年至今
前端显影剂
.美国广播公司{
显示：表格；
背景：灰色；
宽度：350px；
高度：450px；
位置：绝对位置；
左：250px；
顶部：150px；
文本对齐：居中；
}
.abc1{
宽度：20px；
显示：内联块；
高度：20px；
位置：相对位置；
右：-42px；
背景：红色；
z指数：100；
边界半径：50%；
}
.abc2{
显示：表格单元格；
宽度：50%；
右边框：1px纯蓝色；
}
.abc3{
显示：表格行；
}

尝试使用以下代码：

<ul>
   <li>
      <span class="text-left">2015-Present</span>
      <span class="bullet"></span>
      <span class="text-right">Developer</span>
  </li>
  <li>
     <span class="text-left">2015-Present</span>
     <span class="bullet"></span>
     <span class="text-right">Developer</span>
  </li>
  <li>
    <span class="text-left">2015-Present</span>
    <span class="bullet"></span>
    <span class="text-right">Developer</span>
  </li>
</ul>

---

请根据要求安排位置和文本。

给我们看一段代码，然后我们可以帮助您继续前进。用户plunker或codepen显示实时示例。您尝试过borders和PseudoSelector吗？您尝试过什么吗？@madalinivascu还没有。你建议我用什么？@Terence border左和：前/后

<ul>
   <li>
      <span class="text-left">2015-Present</span>
      <span class="bullet"></span>
      <span class="text-right">Developer</span>
  </li>
  <li>
     <span class="text-left">2015-Present</span>
     <span class="bullet"></span>
     <span class="text-right">Developer</span>
  </li>
  <li>
    <span class="text-left">2015-Present</span>
    <span class="bullet"></span>
    <span class="text-right">Developer</span>
  </li>
</ul>

  ul {
        list-style: none;
        width: 300px;
    }

    ul li {
        position: relative;
    }

    ul li span {
        width: calc(100%/3);
        display: inline-block;
    }

    ul li:before {
        content: '';
        position: absolute;
        top: 15px;
        left: 107px;
        height: 90%;
        width: 2px;
        background: #cccccc;
    }

    .bullet {
        width: 7px;
        height: 7px;
        display: inline-block;
        border-radius: 50%;
        background-color: blue;
    }

    .text-left {
        text-align: left;
    }

    .text-right {
        text-align: right
    }