make UL in div with horizontal scroll have full 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 UL in div with horizontal scroll have full 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">
div.wrapper {<!--   w  w w.  j a  va2  s  .c om-->
   width:181px;
}

div {
   overflow-x:auto;
}

ul {
   margin:0;
   padding:0;
   list-style:none;
}

li {
   display:block;
   width:min-content;
   background:red;
   white-space:nowrap;
}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div> 
    <ul> 
     <li> <h3>Lorem ipsum dolor sit amet, consectetur</h3> </li> 
     <li> <h3>Lorem ipsum dolor sit amet, co</h3> </li> 
     <li> <h3>Lorem ipsum dolor sit amet, consectetur</h3> </li> 
     <li> <h3>Lorem ipsum dolor sit amet, consectetur adi</h3> </li> 
     <li> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi </h3> </li> 
     <li> <h3>Lorem ipsum dolor sit amet, co</h3> </li> 
    </ul> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials