帶項目符號的 HTML/CSS 垂直分隔線

Question

我只是想知道如何使用 HTML/CSS 獲得這種 UI 設計：

應該是每次用戶輸入新數據時，都會用分隔符和項目符號顯示數據。

我對 HTML/CSS 方面的這些 UI 設計不熟悉。

Answer 1

這非常接近......我唯一能想到的是您需要調整字體的固定大小，並且它在移動設備上可能不會很漂亮。 https://jsfiddle.net/x6bthxgw/

HTML：

 /* 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; }

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

Answer 2

試試下面的片段。 我不確定這是否是您所需要的。 這個 CSS 是按照簡單的邏輯編寫的：

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

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

Answer 3

你可以試試這個。 這是一個簡單的結構。

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

嘗試使用以下代碼：

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

只需嘗試使用以下鏈接：

演示

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