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

Post a Comment

Popular posts from this blog

angularjs - Redirect to a new template in angular js -

-
i new angularjs, please consider mistakes. the scenario is, have index.html page , login.html page, index , login have different layout different header footer , all. other pages expect login share same layout index.html now, how can navigate login.html using anuglar ui router. myapp.config(function ($stateprovider, $urlrouterprovider) { $stateprovider.state('home', { url: '/', templateurl: 'app/views/site/home.html', controller: 'homectrl' }).state('login', { url: '/login', templateurl: 'app/views/site/login.html' }) }); this not work loads content of login index keeping header , footer same of index. know state supposed work way. now, there way can call new view using ui.router. i appreciate help. thanks you set multiple named views ( https://github.com/angular-ui/ui-router/wiki/multiple-named-views ). this allow make header , footer separate views can ...
Read more

Oracle SQL. How to select specific IDs where value of columns specify criteria? -

-
i have following statement/query: select table1.file_id, table1.status, table2.status table1 inner join table2 on table1.file_id = table2.file_id; the result follows: file id | status table 1 | status table 2 ----------------------------------------------------- 5500002 | ax | ics 5500002 | ax | icso 5500002 | axo | ics 5500003 | ax | ics 5500003 | ax | ics 5500003 | ax | ics 5500004 | null | icso test 5500004 | axo | ics 5500004 | ax | null i need each file id check 4 statuses: - ax - axo - ics - icso i want run select on file id s cover 4 statuses. can see file id occurs multiple times , i'd want query return file id fulfills requirement, in instance return 5500002 , 5500004. for 550000...
Read more

Desktop Launcher for Python Script Starts Program in Wrong Path (Linux) -

-
i can not launch python script .desktop launcher created on linux mint 17.1 cinnamon. the problem script launched in wrong path - namely home folder instead of directory placed in. thereby can not find other vital files accompanying in folder , hence not work. to examine misbehaviour created short script check folder python script executing in: #!/usr/bin/env python import subprocess import time subprocess.call(["pwd"], shell=true) time.sleep(7) # chance read output executing own folder gives output: /home/myusername/pythonprojects i setting desktop launcher via nemo's menu. executing same script yields: /home/myusername i not understand behaviour. how create working desktop launcher python script? the page https://linuxcritic.wordpress.com/2010/04/07/anatomy-of-a-desktop-file/ describes format of .desktop files. you may note "path" element, specifies working directory file run in. in case want desktop file specified path=/...
Read more