CODEWITHSUNDEEP
listcss-floathtml
David Immanuel Haigh
David Immanuel Haigh

Reputation: 21

Two floated spans inside li a

Trying to style a few li's in a calendar but having a bit of bother creating two columns inside an li.

Notice the orange does not fill up the area and the two spans do not align...

http://jsfiddle.net/qN4Tp/3/

<ol>
    <li>
        <a href="#">
            <span class="event-time">12:00pm</span>
            <span class="event-name">Retail sales grew at their fastest pace in seven years during July, according to the latest data from the British Retail Consortium and KPMG. Sales were up 2.2% year-on-year, driven by…
</span>
        </a>
    </li>
</ol>

Upvotes: 0

Views: 1357

Answers (1)

Bhargav Ponnapalli
Bhargav Ponnapalli

Reputation: 9422

This CSS might help you.

Add an attribute to li. Just add overflow:hidden. And reduce the width of the event_name class. Thats all :)

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}
a { text-decoration: none; line-height:1.2}
.event-time { width: 20%; float: left; display:inline}
.event-name { width: 70%; float: left; display:inline}

Here this is the fiddle. http://jsfiddle.net/JPrqT/

Upvotes: 1

Related Questions