CODEWITHSUNDEEP
htmlcss
rohit sharma
rohit sharma

Reputation: 191

Styling list item in HTML

I have written the following HTML code :
My main focus is to align the list items - HOME | All About Kittens | Feeding Your Kitten
properly. It's currently appearing as a simple list. I want to make it like :
enter image description here
Here the list items are Home, Shop and collections and they are aligned horizontally
Plus when you hover over an item it changes in color and a line appears below it
Any ideas how should I go about implementing this way 

a {
  color: black;
  text-decoration: none;
}
.promo_banner {
  background-color: #333;
  text-align: center;
  color: #fff;
  font-size: 12px;
  position: relative;
  width: 100%;
  z-index: 5000;
  top: 0;
  overflow: hidden;
}
div.logo img {
  max-width: 205px;
  width: 100%;
  margin: 0 auto;
  display: block;
  max-width: 100%;
  height: auto;
}
<html>
  <head>
    <link rel="stylesheet" href="home.css" />
  </head>
  <div class="promo_banner">
    <div class="promo_banner__content">
      <p>
        <strong>Our Guide on Caring for Your Furry Feline Friend</strong>
      </p>
    </div>
    <div class="promo_banner-close"></div>
  </div>
  <div class="top_bar clearfix">
    <ul class="social_icons">
      <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
        integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
        crossorigin="anonymous"
        referrerpolicy="no-referrer"
      />

      <div class="container">
        <span><a href="https://www.twitter.com"><i class="fab fa-twitter"></i><a href="https://www.twitter.com"></a></span>
        <span><i class="fab fa-facebook-f"></i></span>
        <span><i class="fab fa-youtube"></i></span>
        <span><i class="fab fa-instagram"></i></span>
      </div>
    </ul>
  </div>

  <div class="logo text-align--center">
    <a href="https://store.linefriends.com" title="LINE FRIENDS INC">
      <img
        src="logo.jpeg"
        class="primary_logo lazyloaded"
        alt="LINE FRIENDS INC"
    /></a>
  </div>
  <div class="nav">
    <ul class="menu center">
      <li >
      <span>HOME</span>
       </li>  
       <li >
        <span>All About Kittens</span>
         </li>  
         <li >
          <span>Feeding Your Kitten</span>
           </li>  
      </ul>
    </ul>
  </div>
</html>
This is the logo.jpeg I am using in the HTML. I wanted to make it like How the image line items appears in middle
enter image description here enter image description here

Upvotes: 0

Views: 71

Answers (2)

Piyush Pranjal
Piyush Pranjal

Reputation: 582

Basically these two properties will fix this.
display: flex;
justify-content: center;

Add these classes and remove background color from .nav .menu

.nav .menu{
  display: flex;
  gap: 1rem;
  list-style: none;
}

.nav{
  display: flex;
  justify-content: center;
}
  
.nav_wrapper {
  background: #f1f1f1;
}

Also wrap your <div class="nav"></div> in another div.nav_wrapper

<div class="nav_wrapper">
  <div class="nav">


  </div>
</div>

Upvotes: 1

Shubham P
Shubham P

Reputation: 1282

You can use display: flex; to show navigation like the UI you mentioned.

Here's the demo: https://codepen.io/shubhamp-developer/pen/gOmmxOg

.nav .menu{
  display: flex;
  list-style: none;
}

Preview: enter image description here

To learn more about display flex, I would prefer to follow this super helpful link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions