【问题标题】:Custom check-list Avada Wordpress自定义清单 Avada Wordpress
【发布时间】:2016-11-17 02:53:20
【问题描述】:

我正在使用 Avada Wordpress 主题。

我想创建一个清单来显示这种结果

其中有一个文本行(我知道如何让它出现)。

您知道如何自定义清单模块或其他模块或使用自定义 CSS 来拥有这个“line-bullet-point”吗?

谢谢

【问题讨论】:

    标签: css wordpress


    【解决方案1】:

    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/

    【讨论】:

    • 哦,看起来很不错,但是不填充圆圈怎么办?容易吗?
    • 请查看我上面更新的帖子。不要伪造将 span.circle 的颜色更改为背景颜色background-color:#f3f5f6;
    • 谢谢,我怎样才能像在图片中那样写文字?
    猜你喜欢
    • 1970-01-01
    • 2015-05-30
    • 2016-12-26
    • 1970-01-01
    • 2014-05-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多