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?
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 column-count Example of an example:
ul {width : 200px; -webkit-column-count: 2; -moz-column-count: 2; column-count: 2;} li {width: 100px; swim left; display: inline;}
& 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