html - make a list item inline when list has list-style-type -
i have simple list:
<div>why did duck cross road?</div> <!-- div added context --> <ul> <li>to other side</li> <li class="correct">to prove he's no chicken</li> <li>because chicken's day off</li> </ul> what want highlight correct answer, have class:
.correct { background: rgba(3, 113, 200, 0.2); } the problem want highlight text of list item, ie want correct item inline.
but if add display:inline / display:inline-block .correct class - list-style-type gets mangled.
now, know can add span element markup correct item achieve so:
<ul> <li>to other side</li> <li><span class="correct">to prove he's no chicken</span></li> <li>because chicken's day off</li> </ul> ..but wondering whether without span.
html
<ul> <li>to other side</li> <li class="correct">to prove he's no chickento prove he's no chickento prove he's no chickento prove he's no chickento prove he's no chickento prove he's no chicken</li> <li>because chicken's day off</li> </ul> css
.correct { display:inline; background: rgba(3, 113, 200, 0.2); } .correct:before { content: ""; display: list-item; float: left; }
Comments
Post a Comment