Question

在涉及网站时，我通常会坚持使用后端，但是我正在尝试为我的简历网站实现一项功能，我希望通过一条线链接这些要点。该线是垂直的，应该在每个项目符号点处断开，以防止该线穿过项目符号点-它应该停止然后重新开始。

我创建了一个版本，但是存在一些问题；该行不会穿过项目符号点，修改行的“ left”属性会将其置于项目符号点的任一侧。该线仅绘制为固定大小，通过绘制每个li或跨度，理想的线可以在任何高度上工作

有人知道如何允许线穿过项目符号点并且线的大小在CSS中不是固定的，而是在HTML元素上固定的吗？

如果已经有此版本，请重新定向我，我找不到符合要求的版本。

div#resumeItem {
  padding-left: 2em;
}

/* linked bullets*/

.list-ic a {
  color: #788288;
  text-decoration: none;
}

.list-ic li {
  position: relative;
}

.list-ic li span {
  display: inline-block;
  border-radius: 1em;
  border-color: #18bc9c;
  border-width: 0.6em;
  border-style: double;
  color: white;
  position: absolute;
}

.list-ic li::before {
  content: '';
  position: absolute;
  background: #18bc9c;
  z-index: -1;
}

.list-ic.vertical {
  padding: 0;
  margin: 0;
}

.list-ic.vertical li {
  list-style-type: none;
  text-align: left;
}

.list-ic.vertical li span {}

.list-ic.vertical li::before {
  top: -12.0em;
  left: 1.1em;
  width: 0.2em;
  height: 24em;
}

.list-ic li:first-child::before {
  display: none;
}

.list-ic .active {
  background: dodgerblue;
}

.list-ic .active~li {
  background: lightblue;
}

.list-ic .active~li::before {
  background: lightblue;
}

/* end */

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-9 col-xs-12">
    <h5 id="profile">Work Experience</h5>
    <hr id="profile">
    <div class="col-xs-12" id="profile">
      <!-- Council -->
      <ul class="list-ic vertical">
        <li><span></span></li>
        <div id="resumeItem">
          <h5 id="resume">Test & Test Test</h5>
          <h6 id="resume">Test Test Test - Internship</h6>
          <p id="resume">Test 2018 - Test 2018 (4 Test)</p>
          <p id="resume">Test, Test</p>
          <p id="resume">Reorder elements in a list or grid using the mouse. Examples. Default functionality · Connect lists · Display as grid · Drop placeholder · Handle empty lists · Include ... Click on and drag an element to a new spot within the list, and the other
            items ....</p>
        </div>

        <li><span></span></li>
        <div id="resumeItem">
          <h5 id="resume">Test & Test Council</h5>
          <h6 id="resume">Test Transport Test - Test</h6>
          <p id="resume">Test 2018 - Test Test (Test Test)</p>
          <p id="resume">Test, Test</p>
          <p id="resume">Reorder elements in a list or grid using the mouse. Examples. Default functionality · Connect lists · Display as grid · Drop placeholder · Handle empty lists · Include ... Click on and drag an element to a new spot within the list, and the other
            items ...</p>
        </div>
      </ul>
    </div>
    <!-- Council End -->
  </div>

Answer 1

您可以使用边框绘制线条和绝对位置以调整子弹。为了使它可视化，我只创建了一支笔，使用左边框画一条垂直线，用边框底画一条短水平线。

在您的情况下，建议您将list-style-type设置为none，在li：before中添加项目符号，并在ul中添加填充

// using before to create the bullet
li:before
    display: block
    position: absolute
    left: 0 //position your bullet
    height: 24px
    width: 8px
    content: "" //add something here for your bullet, you can get from maybe fontawesome ot unicode shape
// then use after to create the line
li:after
    display: block
    position: absolute
    content: "" //leave this blank
    top: //adjust the position, e.g 4px
    left: //adjust the position, e.g 4px
    bottom: //adjust the position, e.g 2px, only if it is needed
    border-left: 2px solid #ff5800 //line color
// might as well create padding for ul
ul
    padding-left: 16px

// sample of code in a slight different case to show how the line can be drawn
https://codepen.io/irwanphan/pen/REpQPO

我正在使用SASS来可视化代码，如果它是用CSS编写的，则可以在每个元素中添加{}；每个属性行。

希望有帮助谢谢

CSS连接的项目符号点

1 个答案: