Saturday, 15 March 2014

html - Multiple columns of links allowing for multiple lines -


I am currently trying to create a 2 column list of links, however, when a link goes to multiple rows, So this loses the difference in the next column I have solved similar problems in the past, although it always requires me to use every time. Is there a clean CSS method to get this layout without using jQuery plugins?

multiple columns

markup

  & lt; Ul class = "two-col-links" & gt; & Lt; Li & gt; & Lt; A href = "" & gt; About us & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Press & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; NMMT & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Career & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Sitemap & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Partner & amp; Amp; & Lt; Br> Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Rules & amp; Amp; Amp; & Lt; Br> Conditions & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  

CSS

ul {width: 200px; } Li {width: 100px; Swim left; Display: Inline; }

Note the example given above why the "partners and links" leave the difference on the left hand column - one of the is the way ?

Using is a bad idea column-count Example of an example:

  & lt; ul class = "two-col-links" & gt; & lt; li & Lt; li & gt; & lt; a href = "" & gt; About us & lt; / a & gt; & lt; / li & gt; & lt; li & gt; & lt; a href = "" & gt; ; Press & lt; / a & gt; & lt; / li & gt; & lt; li & gt; & lt; a href = "" & gt; NMMT  Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "" & gt; Rules & amp; Amp; Amp; & Lt; Br> Conditions & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt;  


No comments:

Post a Comment