Make an inline ul display horizontally to fit the screen width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Horizontal

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Horizontal

Description

Make an inline ul display horizontally to fit the screen width

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
#navlist {<!--   ww w  . j  a  v a2  s. c  o m-->
   width:100%;
   overflow-x:hidden;
   white-space:nowrap;
}

#navlist li
 {
   display:inline;
   list-style-type:none;
   padding-right:21px;
}

#rt, #divlist
 {
   overflow-x:hidden;
}
</style> 
 </head> 
 <body> 
  <ul id="navlist"> 
   <li id="active"> <a href="#" id="current">Lorem ip</a> </li> 
   <li> <a href="#">Lorem ip</a> </li> 
   <li> <a href="#">Lorem ipsu</a> </li> 
   <li> <a href="#">Lorem ips</a> </li> 
   <li> <a href="#">Lorem ips</a> </li> 
   <li> <a href="#">Lorem ip</a> </li> 
   <li> <a href="#">Lorem ipsu</a> </li> 
   <li> <a href="#">Lorem ipsu</a> </li> 
   <li> <a href="#">Lorem ips</a> </li> 
   <li> <a href="#">Lorem ip</a> </li> 
   <li> <a href="#">Lorem ipsum</a> </li> 
   <li> <a href="#">Lorem ipsum</a> </li> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsum d</a> </li> 
   <li> <a href="#">Lorem ipsum </a> </li> 
  </ul>  
 </body>
</html>

Related Tutorials