CSS - 无序列表中项目符号之间的垂直线答案

【问题标题】：CSS - Vertical line between bullets in an unordered listCSS - 无序列表中项目符号之间的垂直线
【发布时间】：2013-07-11 20:16:06
【问题描述】：

我将如何在无序列表中的项目符号之间画一条垂直线，如下所示：

请注意，该行在最后一个列表项目符号处停止。我使用list-style:none; 和图像作为项目符号。 HTML 如下所示：

<ul class="experiences">

  <!-- Experience -->
  <li class="green">
    <div class="where">New York Times</div>
    <h3 class="what green">Senior Online Editor</h3>
    <div class="when">2012 - Present</div>

    <p class="description">Jelly-o pie chocolate cake...</p>
   </li>

   ...

按要求提供 CSS 代码：

/* Experiences */
ul.experiences {
    padding-left: 15px;
    margin-top: -1px;
}
ul.experiences li {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
}
ul.experiences li.green {
    background: url('../img/misc/list-bullet-green.png') no-repeat;
}
ul.experiences li.blue {
    background: url('../img/misc/list-bullet-blue.png') no-repeat;
}
ul.experiences li.pink {
    background: url('../img/misc/list-bullet-pink.png') no-repeat;
}
.where {
    font-size: 1.2857em; /* 18/16 -> 18px */
    font-weight: 300;
    display: inline;
    margin-right: 0.5em;
}
.what {
    font-size: 0.75em; /* 12/16 -> 12px */
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    background-color: #444444;
    display: inline-block;
    padding: 0 12px;
    margin: -5px 0.5em 0 0 !important;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.what.green {
    background-color: #c4df9b;
}
.what.blue {
    background-color: #6dcff6;
}
.what.pink {
    background-color: #f06eaa;
}
.when {
    float: right;
    color: #b9b9b9;
    font-style: italic;
}
.description {
    display: block;
    margin-top: 0.5em;
}

【问题讨论】：

我相信您可以使用.experiences li:last-child来-不-显示左边框，而您可以使用.experiences li在其余部分的左侧显示边框
@Sumurai8 这样，边框就不会下到最后一个子弹了。
那么，你解决了这个问题吗？如果您使用了本页提供的解决方案，请考虑将其标记为已接受的答案。
抱歉耽搁了，我有一段时间没时间看这个了。请参阅我对您的回答的评论。

标签： css list html-lists

【解决方案1】：

我怀疑这是否可以像其他人建议的那样仅使用边框和“摆弄边距”来实现，至少我这样做没有运气。

此解决方案使用 CSS 生成的内容（:before 和 :after）来绘制项目符号和线条。它允许高度定制化，保持标记干净，但请注意browser support。

JSFiddle（滚动 CSS 直到出现 /* BORDERS AND BULLETS */ 评论）

ul.experiences li {
    position:relative; /* so that pseudoelements are positioned relatively to their "li"s*/
    /* use padding-bottom instead of margin-bottom.*/ 
    margin-bottom: 0; /* This overrides previously specified margin-bottom */
    padding-bottom: 2.5em;
}

ul.experiences li:after {
    /* bullets */
    content: url('http://upload.wikimedia.org/wikipedia/commons/thumb/3/30/RedDisc.svg/20px-RedDisc.svg.png');
    position: absolute;
    left: -26px; /*adjust manually*/
    top: 0px;
}

ul.experiences li:before {
    /* lines */
    content:"";
    position: absolute;
    left: -16px; /* adjust manually */
    border-left: 1px solid black;
    height: 100%;
    width: 1px;
}

ul.experiences li:first-child:before {
   /* first li's line */
   top: 6px; /* moves the line down so that it disappears under the bullet. Adjust manually */
}

ul.experiences li:last-child:before {
    /* last li's line */
   height: 6px; /* shorten the line so it goes only up to the bullet. Is equal to first-child:before's top */
}

注意：如果行的 border-color 指定了 alpha 通道，则第一个和第二个元素的边框之间的重叠将很明显。

【讨论】：

这似乎工作得很好——除了 IE8 也显示了最后一项的行......有什么办法解决这个问题吗？如果我让它与 IE8 一起工作，我会接受这个答案。用 IE8 看这个例子：graphic-dev.com/stuff/vcard
我还没有找到纯粹用 CSS 来支持 IE8 的方法。最好的解决方法是使用 jQuery（因为无论如何您都可能在页面上使用它）。它有一个:last-child 选择器，可用于将特定类分配给最后一个孩子，例如experiences-last-li。然后将最后一条规则的选择器从ul.experiences li:last-child:before 更改为ul.experiences li.experiences-last-li:before。不要忘记在源代码中添加注释，解释此解决方法的必要性！
编辑：像魅力一样工作！我怎么没想到……？ :) 非常感谢！
谢谢老兄。它为我节省了半个工作日。干杯：+1：

【解决方案2】：

由于这里没有很多好的答案，我想我会添加我的解决方案：

我利用相对位置并在最后一项上包含一个白色蒙版来隐藏溢出。适用于移动视图和项目高度的变化。

HTML

<div class="list-wrapper">

    <div class="red-line"></div>

    <div class="list-item-wrapper">
        <div class="list-bullet">1</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
    </div>

    <div class="list-item-wrapper">
        <div class="list-bullet">2</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
    </div>

    <div class="list-item-wrapper">
        <div class="list-bullet">3</div>
        <div class="list-item">
            <div class="list-title">ITEM</div>
            <div class="list-text">Text</div>
        </div>
        <div class="white-line"></div>
    </div>

</div>

CSS

.list-wrapper {
  position:relative;
}
.list-item-wrapper {
  margin-top:10px;
  position:relative;
}
.list-bullet {
  float:left;
  margin-right:20px;
  background:#FF4949;
  height:30px;
  width:30px;
  line-height:30px;
  border-radius:100px;
  font-weight:700;
  color:white;
  text-align:center;
}
.list-item {
  display:table-row;
  vertical-align:middle;
}
.list-title {
    font-weight:700;
}
.list-text {
    font-weight:400;
}
.red-line {
  background:#FF4949;
  z-index:-1;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}
.white-line {
  background:#FFF;
  z-index:-1;
  top:0px;
  width:1px;
  height:100%;
  position:absolute;
  left:15px;
}

演示 http://jsfiddle.net/cfzsgkyn/

【讨论】：

【解决方案3】：

现在可能有点老了，但这里有一种方法可以做到这一点。它需要更多的标记来创建样式和控制元素的高度（我使用跨度，但你可以使用标签）：

ol,
ul {
  list-style: none;
}
li {
  display: flex;
  flex-flow: row;
  min-height: 100px;
  position: relative;
}
span.number {
  margin-right: 100px;
  text-align: center;
  width: 1em;
  height: 1em;
  background-color: red;
  border-radius: 50%;
  z-index: 1;
}
span.line {
  position: absolute;
  height: 100%;
  border: solid black 0.1em;
  top: 0.5em;
  left: 0.45em;
}
li:last-child span.line {
  display: none;
}
}
span.blob {}

<ul>
  <li><span class='line'></span><span class='number'>1</span>
    <div class='blob'>Hello</div>
  </li>
  <li><span class='number'>2</span>
    <div class='blob'>Goodbye</div>
  </li>
</ul>

http://jsfiddle.net/efava0je/

【讨论】：

你应该从 jsfiddle 中包含你的 css。

【解决方案4】：

ul.experiences li {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
    border-left: 1px solid #yourcolor;
}

然后我将只使用填充和边距来对齐它并阻止最后一个扩展：

ul.experiences li:last-child {
    padding-left: 33px;
    margin-bottom: 2.5em;
    list-style: none;
    background: url('../img/misc/list-bullet-darkgray.png') no-repeat;
    border-left: none;
}

最后一个子选择器在 IE

DEMO

【讨论】：

目前该解决方案如下所示：s18.postimg.org/jok2ljwzd/line.png 如您所见，有几个问题。列表项之间的空白可能可以通过使用填充而不是边距来修复，但我不确定这是否是最佳的......另外，我不希望这条线在第一个项目符号上方延伸一个像素或在最后一个之下...
@graphic_dev 然后你需要使用填充、边距和偏移项目符号点的背景图像，以便它们全部对齐。它很繁琐，但使用边框是最好的解决方案。

【解决方案5】：

您需要添加一个内部和外部 div，然后使用边距。这就是我的意思

演示：http://jsfiddle.net/kevinPHPkevin/N9svF/

ul {
    padding-left:14px;
    margin-top:-6px;
    margin-bottom:-6px;
    padding-bottom:0;
}
#mainDiv {
    height: 200px;
    width:200px;
    position: relative;
}
#borderLeft {
    border-left: 2px solid #f51c40;
    position: absolute;
    top: 25px;
}

【讨论】：

我认为这行不通。您正在使用负下边距来确保该线不会延伸到最后一个项目符号下方，但是无法知道最后一个 li 项目的高度。请参阅此示例，其中最后一个 li 项有两行内容：jsfiddle.net/N9svF/3
这行得通。但是，您必须向列表项添加负左边距。像这样：li {margin-left:-5px;}