Tue, 2015-09-29 17:10
I am trying to change a vertical list into a horizontal one which i have been able to do but unable to add spacing so that the inline list has appropriate spacing. The current CSS is as follows:-
<div class="propinfo"> <p></p> <ul class="marB0"> <li class="row beds"><span class="muted left">Bed</span><span class="right">1</span>::after</li><li class="row baths"><span class="muted left">Baths</span><span class="right">1</span>::after</li><li class="row sqft"><span class="muted left"> m<sup>2</sup></span><span class="right">60</span>::after</li></ul> </div>
I can covert this to a horizontal list by adding .propinfo ul li { display: inline-block; } but the words and numbers are then all together i.e. Bed1Baths1m260 for example.
I need to have them read Bed 1 Bath 1 M2 60 I also want to make the word Bed into Beds and possibly change the color of the words Beds/Baths/M2 so they stand out from the following numbers.
Some advice greatly appreciated. You can view the current layout on the website holdensothebysrealty-rentals.com where there is a list of featured properties.
Thanks
Thu, 2015-10-01 07:45
#1
Word-spacing
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1.5em;} p { font-size: 1em;} ul { padding: 0; word-spacing: 1.5em;} li { display: inline-block; word-spacing: normal;} /*]]>*/ </style> </head> <body> <ul> <li> Bed: 1 </li> <li> Baths: 1 </li> <li> m<sup>2</sup>: 60 </li> </ul> </body> </html>
cheers,
gary
Fri, 2015-10-02 15:50
#2
Word Spacing
Hi Gary
Thank you for the above but unfortunately it did not change the layout. The words and following numbers were all together as before.
Fri, 2015-10-02 16:41
#3
Actually, it does
Since I tested the solution, and it worked, I can only assume you applied the instructions differently from what I have.
Show us the actual html and css as you used it.
cheers,
gary
Fri, 2015-10-02 19:49
#4
Word Spacing
Hi Gary
I just copied all the above into the section where personalized CSS can be added. Maybe that was not the correct thing to do?
It changed the format from a vertical to a horizontal list but still left the words and numbers all joined together. Also the numbers and M2 differ, dependent on the individual property being displayed, with that information being pulled from the appropriate listing form so I was not clear whether including these in the revision was correct. The original code does not include these as every one will be different.
Thanks again for replying
Mon, 2015-10-19 14:56
#5
Just you can add the padding
Just you can add the padding value for each li
Mon, 2015-11-30 16:23
#6
You have to set padding for
You have to set padding for each li with in ul.