list - Two floated spans inside li a -
trying style few li's in calendar having bit of bother creating 2 columns inside li.
notice orange not fill area , 2 spans not align...
<ol> <li> <a href="#"> <span class="event-time">12:00pm</span> <span class="event-name">retail sales grew @ fastest pace in 7 years during july, according latest data british retail consortium , kpmg. sales 2.2% year-on-year, driven by… </span> </a> </li> </ol>
this css might you.
add attribute li. add overflow:hidden. , reduce width of event_name class. thats :)
ol { width: 83%; margin:0; } li { line-height: 1.2; margin: 0; padding: 5px; list-style-type: none; background: #d4481b; border:1px solid ; color: #ccc; overflow:hidden} { text-decoration: none; line-height:1.2} .event-time { width: 20%; float: left; display:inline} .event-name { width: 70%; float: left; display:inline}
here fiddle. http://jsfiddle.net/jprqt/
Comments
Post a Comment