HTML CSS examples for CSS Widget:UL Horizontal
Force all <li> elements to be shown horizontally in a single line
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .iconlist li {<!-- ww w . j a v a2 s .c o m--> list-style:none; text-align:center; padding:21px 0px 21px 0px; clear:none; float:left; } .inline { display:inline; clear:none; float:left; } </style> </head> <body> <ul class="iconlist"> <li> <a href="http://www.google.com" target="_blank"> <img src="https://www.java2s.com/style/demo/Firefox.png" < a> </a> <h3> <a href="http://www.google.com" target="_blank"></a> <a href="http://www.google.com" target="_blank">Lor</a> </h3> </li> <li> <a href="http://www.google.com" target="_blank"> <img src="https://www.java2s.com/style/demo/InternetExplorer.png" < a> </a> <h3> <a href="http://www.google.com" target="_blank"></a> <a href="http://www.google.com" target="_blank">Lorem i</a> </h3> </li> <li> <a href="http://www.google.com" target="_blank"> <img src="https://www.java2s.com/style/demo/Opera.png" < a> </a> <h3> <a href="http://www.google.com" target="_blank"></a> <a href="http://www.google.com" target="_blank">Lorem </a> </h3> </li> <li> <a href="http://www.google.com" target="_blank"> <img src="https://www.java2s.com/style/demo/Firefox.png" < a> </a> <h3> <a href="http://www.google.com" target="_blank"></a> <a href="http://www.google.com" target="_blank">Lorem</a> </h3> </li> </ul> </body> </html>