2016-11-16 24 views
0

我使用的是Avada Wordpress主題。自定義檢查列表Avada Wordpress

我想創建一個檢查列表將顯示那種結果

enter image description here

有它之間的文本行的(我知道如何讓它出現)。

您是否知道如何自定義檢查列表模塊或其他模塊,或者使用自定義CSS來擁有這個「line-bullet-point」?

感謝

回答

2

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/

+0

噢,它看起來很不錯,但是關於做圓圈未填寫什麼?這很容易嗎? –

+1

請檢查我上面的更新後的帖子。不要僞造將span.circle的顏色更改爲背景的顏色'background-color:#f3f5f6;' – Alex

+0

謝謝,我該如何在圖像中編寫文本? –