CODEWITHSUNDEEP
htmlcss
user15367801
user15367801

Reputation:

css padding, float does not work in html a tag

I want the menu to be shown from left to right. But padding and float do not work in HTML. Here is my code

.main-nav ul li a {
  padding-right: 15px;
  float: left;
}
<div class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Upvotes: 1

Views: 37

Answers (2)

Anmol Bhardwaj
Anmol Bhardwaj

Reputation: 674

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .main-nav ul li a {
            padding-left: 15px;
            float: right;
        }
    </style>
</head>
<body>
    <div class="main-nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</body>
</html>

Both of them are working fine. Please check again.

  1. You have added padding-right instead of left which does not serve any purpose
  2. You have given float left which is also not serving any purpose.

As you can see in this code changing any/both of these values work perfectly. Please check your code again or elaborate what you want to achieve with this HTML snippet

Upvotes: 0

Al-Amin Sarker
Al-Amin Sarker

Reputation: 508

Your styling code is not correct. Here is the correct css code. You may replace with this.

.main-nav ul li {
  padding-right: 15px;
  float: left;
}
<div class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Upvotes: 1

Related Questions