2016-11-16 1 views
0

Avada Wordpress 테마를 사용 중입니다.맞춤 체크리스트 Avada Wordpress

나는 결과

enter image description here

그 사이에 텍스트 행이 있습니다의 종류를 표시하는 체크리스트를 만들려면 (내가 보이게하는 방법을 알고).

체크리스트 모듈이나 다른 모듈을 맞춤 설정하는 방법이나 맞춤 CSS를 사용하여이 "행 - 글 머리 기호"를 사용하는 방법을 알고 계십니까?

감사

답변

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

위의 업데이트 된 게시물을 확인하십시오. forger가 span.circle의 색을 배경색으로 변경하지 마라'background-color : # f3f5f6;' – Alex

+0

고맙습니다. 이미지에서했던 것처럼 텍스트를 쓰려면 어떻게해야합니까? –

관련 문제