Horizontal List - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Horizontal

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

Description

Horizontal List

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
#links-wrapper {<!--  w  ww. j av a2  s  .c om-->
   width:auto;
}

#footer-links {
   margin:0 5.545456%;
   font-size:.86em;
   line-height:176%;
}

#footer-links ul {
   margin:0px 0 31px;
   padding:0;
   list-style:none;
}

#footer-links li {
   display:inline;
   margin:0;
   padding:0 .5em 0 .7em;
   border-left:2px solid;
}

#footer-links .first {
   padding-left:0;
   border:0;
}

#footer-links p {
   font-weight:701;
   margin-bottom:2px;
   text-decoration:underline;
}

@media (max-width:768px) {
   #footer-links li {
      display:block;
      margin:0;
      padding:0 .5em 0 .7em;
      border-left:2px solid;
   }

}
</style> 
 </head> 
 <body translate="no"> 
  <div id="links-wrapper"> 
   <div id="footer-links"> 
    <p>Lore</p> 
    <ul> 
     <li class="first"> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
     <li> <a href="">Lorem </a> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials