html - Floated span sticking to one line, but want to flow onto new lines -


i have list uses float show keys , values on alternative sides of div.

the problem i'm having when there's long string key, floated, instead of breaking onto multiple lines, entire line moves down onto new line.

here's example : http://jsfiddle.net/3djakgf7/

this displays fine, if there multiple values after weight loss surgery (for example, 'weight loss surgery, arm lift'), entire line drops down next, , interrupts flow of floats below. in example: http://jsfiddle.net/3djakgf7/1/

how can make float starts on line opposite left key, , drops down next line when runs out of room, , pushes following list items down line it?

<ul class="post-meta">     <li>         <span class="post-meta-key">procedure</span>         <span class="pull-right">weight loss surgery, arm lift</span>     </li>     <li>         <span class="post-meta-key">age</span>         <span class="pull-right">44</span>     </li>     <li>         <span class="post-meta-key">location</span>         <span class="pull-right">surrey</span>     </li> </ul> 

please check solution below or on updated fiddle

ul {     width: 236px;     padding-left: 0;     margin-bottom: 0; } ul li {     list-style-type: none;     width: 100%;     float: left; } .post-meta-key {     font-weight: bold;     float: left;     width: 76px; } .pull-right {     float: right;     width: 160px; } 

Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -