Avoid "box item" from wrapping content - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Box

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Box

Description

Avoid "box item" from wrapping content

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ip</title> 
  <style>
body {<!--   ww  w .j a v  a2 s . co m-->
   padding:0 31px;
}

.banner {
   background-color:Chartreuse;
   height:551px;
}

.box ul {
   margin:21px -3px 0 0;
   padding:0;
   width:auto;
   display:flex;
}

.box ul li {
   width:26%;
   margin-right:3px;
   float:left;
   list-style:none;
   display:block;
   padding:30px 0;
   font-size:17px;
   line-height:24px;
   text-transform:uppercase;
   background-color:yellow;
   color:blue;
   text-align:center;
}
</style> 
 </head> 
 <body translate="no"> 
  <section class="banner"></section> 
  <section class="box"> 
   <ul> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
    <li>Lorem ipsum</li> 
   </ul> 
  </section>  
 </body>
</html>

Related Tutorials