How do I horizontally extend the clickable area of an inline span?

22

New Member
I have two spans, both of which trigger an action when clicked:\[code\]<div> <span>This is a multiline<br/> chunk of text.</span> <span>And this is a <br/> second one.</span></div>\[/code\]I would like the user to be able to click anywhere in the containing div (which is styled to look like a box), and have the click be associated with one or the other span. Right now, the user has to click on the actual text for the click event to get fired.Here's what it looks like: http://jsfiddle.net/bJJLF/1/. I want the spans to appear like a single paragraph (ie, so I probably need to keep them styled \[code\]display: inline\[/code\]). There are going to be line breaks, but I'm flexible re: how they are created (so I can kill the \[code\]</br>\[/code\]s if necessary).Is there an easy css solution for this that I'm missing, or do I have to put a click handler on the surrounding box and do coordinate math to figure out which span the click belongs to?
 
Top