【发布时间】:2016-11-17 02:53:20
【问题描述】:
我正在使用 Avada Wordpress 主题。
我想创建一个清单来显示这种结果
其中有一个文本行(我知道如何让它出现)。
您知道如何自定义清单模块或其他模块或使用自定义 CSS 来拥有这个“line-bullet-point”吗?
谢谢
【问题讨论】:
我正在使用 Avada Wordpress 主题。
我想创建一个清单来显示这种结果
其中有一个文本行(我知道如何让它出现)。
您知道如何自定义清单模块或其他模块或使用自定义 CSS 来拥有这个“line-bullet-point”吗?
谢谢
【问题讨论】:
HTML
<ul>
<li>
<span class='line'></span>
<span class='circle'></span>
</li>
<li>
<span class='circle'></span>
</li>
</ul>
CSS
ul {
list-style : none;
}
li{
display : flex;
flex-flow: row;
min-height : 100px;
position : relative;
}
span.circle {
margin-right : 100px;
text-align: center;
width : 1em;
height : 1em;
border:1px solid red;
background-color:#f3f5f6;
border-radius : 50%;
z-index : 100;
}
span.line {
position : absolute;
height : 100%;
border : solid red 0.1em;
top : 1em;
left : 0.5em;
}
li:last-child span.line{
display : none;
}
JSfiddle:http://jsfiddle.net/1yqw1y87/1/
【讨论】:
background-color:#f3f5f6;