Add different margin to ONE li in ul - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

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

Description

Add different margin to ONE li in ul

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum d</title> 
  <style>
body {<!--from w  w  w. j  av  a  2s .  c  o m-->
   margin:-2em 0;
   position:relative;
}

#top {
   background-color:Chartreuse;
   height:54.126em;
}

.bckg-image {
   position:absolute;
   height:54.126em;
   opacity:0.6;
}

nav {
   height:7.6em;
   border-bottom:2px solid yellow;
   position:relative;
}

nav ul {
   list-style-type:none;
   text-align:center;
}

nav li {
   display:inline;
   margin:0em 2.6em;
   color:blue;
   text-transform:uppercase;
   font-family:Lato, Arial;
   letter-spacing:0.2em;
}

.logo {
   vertical-align:middle;
   display:inline-block;
   margin-top:.6em
}
</style> 
 </head> 
 <body translate="no"> 
  <section id="top"> 
   <img src="https://www.java2s.com/style/demo/Firefox.png" class="bckg-image"> 
   <header> 
    <nav> 
     <ul> 
      <li>Lore</li> 
      <li>Lorem</li> 
      <li>Lorem </li> 
      <li class="logo"> <img src="https://www.java2s.com/style/demo/Safari.png"> </li> 
      <li>Lorem ips</li> 
      <li>Lore</li> 
      <li>Lorem i</li> 
     </ul> 
    </nav> 
   </header> 
  </section>  
 </body>
</html>

Related Tutorials