HTML CSS examples for CSS Widget:UL Alignment
align every two <li> next to each other
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> ul {<!--from w ww.j a va 2 s .c o m--> list-style-type:none; } ul li { display:inline; float:left; } li:nth-child(2n) { clear:left; } </style> </head> <body> <ul> <li class="alphabetRow"> <a href="#" id="alpha_1" class="alphabet active">Lor</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_2" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_3" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_4" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_5" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_6" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_7" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_8" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_9" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_10" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_11" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_12" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_13" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_14" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_15" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_16" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_17" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_18" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_19" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_20" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_21" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_22" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_23" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_24" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_25" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_26" class="alphabet">L</a> </li> <li class="alphabetRow"> <a href="#" id="alpha_27" class="alphabet">L</a> </li> </ul> </body> </html>