ul 글 머리 기호를 단추로 바꾸기

ul 글 머리 기호를 단추로 바꿀 수 있습니까? CSS로 이미지로 변경할 수는 있지만 실제 요소가 필요한지 알고 있습니다. 당신이 요청으로ul 글 머리 기호를 단추로 바꾸기

는

2012-12-15 lawx

아니요, 불가능합니다. – Oded

대단히 ...이 방법을 복제하는 방법이 있습니까? – lawx

정확히 달성하려는 것은 무엇입니까? 문맥을 설명하십시오. – ATOzTOA

이 불가능합니다,하지만 당신은 아마 그것을 모방 수 :

<ul> 
    <li><button>some button text</button>List-element text.</li> 
</ul>

그리고 다음 CSS :

ul, li { 
    list-style-type: none; 
} 

li { 
    padding-left: 0; 
    margin-left: 0; 
} 

li button { 
    margin-right: 2em; 
}

JS Fiddle demo.

이 접근법의 성공 또는 적용 가능성은 물론 귀하의 질문에서 생략 한 유스 케이스에 전적으로 달려 있습니다. 더 자세하게 말하면 아마도이 대답이 더 유용해질 수 있습니다.

출처

2012-12-15 21:40:39

나는 to-do list 스타일을 만들고있어, 버튼은 체크 박스/삭제 버튼의 역할을 할 것이다. JSfiddle에서 솔루션은 잘 작동하지만 브라우저 (Google 크롬, 코다 미리보기)에서 직접 추가로 들여 쓰기가 있습니다. – lawx

http://cl.ly/image/3l3j3K3U2f2E – lawx

"li 버튼"에 대해 CSS의 margin-right 값을 줄이면됩니다. li 버튼 { margin-right : 0; } – ATOzTOA

아니요, CSS를 사용하면 글 머리 기호의 스타일을 지정하거나 생략 할 수 있습니다. 대신 콘텐츠를 생성 할 수 있지만 생성 된 콘텐츠에는 실제 버튼 요소가 아닌 일부 콘텐츠가 포함 된 의사 요소 만 있습니다.

마크 업에 ul 요소가 필요한 경우 (이유가 궁금합니다) button 요소 (및 글 머리 기호를 숨기는 CSS)를 삽입하는 JavaScript를 사용할 수 있습니다. 그러나 의도를 정확하게 추측한다고 가정하면 하나의 열에있는 버튼이있는 테이블을 사용하거나 다른 열의 관련 콘텐츠를 사용하거나 button 요소로 시작하는 콘텐츠를 가진 div 요소 만 사용하십시오.

출처

2012-12-15 21:55:20

ul 글 머리 기호를 단추로 바꾸기

답변

관련 문제