So I'll go into my troubles with this and how I overcame them. I had an list of <md-item>'s that had a time, title, and image. It looked pretty good, but I didn't like how the title and image were not aligned since they were being "pushed" right by the actual time text. Here's an example of what I'm talking about (the green background is to emphasis the different widths of these two spans):
And here's some simplified code to illustrate the example:
css (original- incorrect)
Strangely, this css wasn't working- well, it wasn't changing the span's width at least. I knew changing it to a <div> would make the width style properties take effect, but then the image and title would be on a new line- not what I wanted!
Display: Block and Float: Left
By adding display:block; to my css class I was able to fix the issue with the width not affecting the span tags. Yay! However, now the two spans are displaying under each other. Whoops!
Luckily, this is easy to fix. Just add float: left; to get the spans floating next to each other. Huzzah! Here's what the finished product looks like:
Very nice! For your reference, below is the finished css.
css (final- correct)
The posts on this site are written and maintained by Jim Lynch. About Jim...