带子弹的HTML / CSS垂直分隔线

Question

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

每次用户输入新数据时，它都会用分频器和子弹显示数据。

我不熟悉HTML / CSS这类UI设计。

先谢谢！

Answer 1

这非常接近..只有我能想到的是你需要调整你的字体的固定大小，并且它可能不会在移动设备上漂亮。 https://jsfiddle.net/x6bthxgw/

HTML：

＆＃13;

＆＃13;

/* CSS:  */

    body {
      font-family: sans-serif;
    }
    
    ul.pretty-list {
      border-left: 1px solid grey;
      padding-left: 16px;
      margin-left: 200px;
      text-transform: uppercase;
    }
    
    ul.pretty-list li {
      list-style: none;
    }
    
    ul.pretty-list ul {
      padding-left: 0px;
    }
    
    ul.pretty-list h4 {
      color: skyblue;
      position: relative;
    }
    
    ul.pretty-list .date {
      margin-left:-216px;
      width:184px;
      text-align: right;
      padding-right: 1em;
      float: left;
      position:relative;
    }
    
    ul.pretty-list .date:after {
      content:"•";
      position: absolute;
      right:-10px;
      width:21px;
      font-size:30px;
      line-height:18px;
      text-align:center;
    }

＆＃13;

<ul class="pretty-list">
      <li>
          <h4><div class="date">2015 - Present</div>Item 1</h4>
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
      </li>
      <li>
          <h4><div class="date">2014 - 2015</div>Item 2</h4>
          <ul>
            <li>Subitem 1</li>
            <li>Subitem 2</li>
            <li>Subitem 3</li>
            <li>Subitem 4</li>
          </ul>
      </li>

</ul>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试下面的代码片段我不知道这是你需要的，这个css写的简单逻辑为你的信息

＆＃13;

＆＃13;

.full-width {
	float:left;
	width:100%;
	display:flex;
}
.first_box {
	width:300px;
	display:inline-block;
	text-align:right;
	font-size:15px;
	padding-right:15px;
}
.second_box {
	width:400px;
	display:inline-block;
	text-align:left;
	padding-left:30px;
	font-size:15px;
	border-left:2px solid #069;
	position:relative;
}
.second_box:after {
	content:"";
	position:absolute;
	left:-8px;
	top:8px;
	background:#900;
	width:15px;
	height:15px;
	border-radius:50%;
}
.second_box h2 , .first_box h2 {
	margin:0;
}

＆＃13;

<div class="full-width">
	<div class="first_box">
    	<h2>2015 present</h2>
    </div><!-- /.first_box -->
    <div class="second_box">
    	<h2>frontend web Developer</h2>
        <p>something here</p>
        <p>something here</p>
        <p>something here</p>
        
    </div><!-- /.second_box -->
</div><!-- /.full-width -->
<div class="full-width">
	<div class="first_box">
    	<h2>2015 present</h2>
    </div><!-- /.first_box -->
    <div class="second_box">
    	<h2>frontend web Developer</h2>
        <p>something here</p>
        <p>something here</p>
        <p>something here</p>
        
    </div><!-- /.second_box -->
</div><!-- /.full-width -->

＆＃13;

＆＃13;

＆＃13;

Answer 3

请尝试使用以下链接：

DEMO

<div style="
    display: table;
    background: yellow;
    width: 350px;
    height: 450px;
    position: absolute;
    left: 250px;
    top: 150px;
    text-align: center;
"><div style="
    display: table-row;
"><div style="
    display: table-cell;
    width: 50%;
    border-right: 1px solid blue;
">2015 - Present<span style="
    width: 20px;
    display: inline-block;
    height: 20px;
    position: relative;
    right: -42px;
    background: red;
    z-index: 100;
    border-radius: 50%;
"></span></div><div style="
    display: table-cell;
    width: 50%;
    border-left: 1px solid blue;
">Front End Developer</div></div><div style="
    display: table-row;
"><div style="
    display: table-cell;
    width: 50%;
    border-right: 1px solid blue;
"></div><div style="
    display: table-cell;
    width: 50%;
    border-left: 1px solid blue;
"></div></div></div>

Answer 4

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

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

Answer 5

尝试使用以下代码：

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

CSS：

  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
    }

请根据要求安排职位和文字。

Answer 6

ul li {
  display: inline-block;
  padding: 5px;
  border: 0;
  border-right-width: 1px;
  border-style: solid;
}

<ul>
  <li>
    menu1
  </li>
  <li>
    menu2
  </li>
  <li>
    menu3
  </li>
</ul>