Parallel Bullet Points

Hi,

You can do this by adding a display: inline; to the li element of the list you are targeting. For example:

The list

<ul class=""parallel-list>
  <li>List Item 1</li>
  <li>List Item 2</li>
</ul>

The CSS

.parallel-list ul li {
  display: inline;
}

Hope that gets you going in the right direction.

Hi Brad

Thanks for the above example. I have tried that but I unfortunately it does not appear to be working as desired. It simply is displaying it in a single bullet point list.

Below is what I have listed as per your instructions:

<ul>
<li>AA Finance</li>
<li>Abbey National</li>
<li>Alliance and Leicester</li>
<li>Asda Loans</li>
<li>Bank of Ireland</li>
<li>Bank of Scotland (HBOS)</li>
<li>Barclays</li>
<li>Barclaycard</li>
<li>Beneficial Finance</li>
<li>Birmigham Midshires</li>
<li>Black Horse Finance</li>
<li>Blemain Finance</li>
<li>Bradford & Bingley</li>
<li>Brittania</li>
<li>Cahoot</li>
<li>Capital One</li>
<li>Carcraft</li>
<li>Chelsea</li>
<li>Cheltenham & Gloucester</li>
<li>Cheshire Building Society</li>
<li>Churchill</li>
<li>Citi Financial</li>
<li>Clydesdale Bank</li>
<li>Co-operative Bank</li>
<li>Coventry Building Society</li>
<li>Dial 4a Loan</li>
<li>Direct Line</li>
<li>Eastern Western Motor Group Ltd</li>
<li>Egg</li>
<li>Endeavour</li>
<li>First Direct</li>
<li>First Plus</li>
<li>First Trust Bank</li>
<li>Freedom Finance</li>
<li>GE Money</li>
<li>GE Home Finance</li>
<li>George White Motors Limited</li>
<li>GK Group Limited</li>
<li>Goldfish</li>
<li>Halifax</li>
<li>Hadenglen Home Finance</li>
<li>HFC</li>
<li>Home & County Mortgages</li>
<li>HSBC</li>
<li>Intelligent Finance</li>
<li>Land of Leather</li>
<li>Legal & General</li>
<li>Liverpool Victoria</li>
<li>Lloyds TSB</li>
<li>Loans.co.uk</li>
<li>Lombard Direct</li>
<li>Marks and Spencer</li>
<li>Marbles</li>
<li>MBNA</li>
<li>Mint</li>
<li>Money Partners</li>
<li>Morgan Stanley</li>
<li>Nationwide Building Society</li>
<li>Natwest</li>
<li>Nemo Personal Finance</li>
<li>Norton Finance</li>
<li>Northern Rock</li>
<li>Norwich Union</li>
<li>Ocean Finance</li>
<li>Paragon Personal Finance</li>
<li>Parks of Hamilton (Holdings Ltd</li>
<li>Picture Finance</li>
<li>Promise Finance</li>
<li>RAC Financial Services</li>
<li>RBS (Royal Bank of Scotland)</li>
<li>Redcoats</li>
<li>Regency Mortgage Corporation Ltd</li>
<li>Ringways Garages</li>
<li>Sainsbury’s Bank</li>
<li>Santander</li>
<li>Smile</li>
<li>Sterling Finance</li>
<li>Swinton Group Ltd</li>
<li>Tesco Finance</li>
<li>Ulster Bank</li>
<li>Virgin Money</li>
<li>Welcome Finance</li>
<li>Woolwich</li>
<li>Yes Loans</li>
<li>Yorkshire Bank</li>
</ul>
.parallel-list ul li {
display: inline;
}

Sorry CSS selector should be
ul.yourclassname li

Sorry Brad I dont understand please clarify as I am not very techie

You need to add a class to your
ul, so it looks like

<ul class="parallel-list">
  <li>item</li>
  <li>item</li>
  more items etc
</ul>

then your CSS to style the list will be like

ul.parallel-list li {
  display: inline;
}

This CSS will tell each li in your ul with a class name of parallel-llist to display inline across the page.

Thanks Brad i will try that

Hi Brad

I think I have completed the first part.

But as for the css, where do I add that as I have been adding it to the bottom of the same page. Sorry to be a pain but I am not very techie.

Do I have to add the css code in one of the editor pages

Thanks in advance

Si

You would have to add it to your theme CSS file, go to the theme editor and try adding it there.

Thanks for your response Saru.

I have added the CSS code to the very bottom of the (style.css) page

However in doing so, it no longer displays in a list format now instead it is presenting the list in a condensed paragraph.

Note that I have only added the

ul.parallel-list li {
display: inline;
}

In the css style sheet.

I hope that is correct.

Any help would be much appreciated.