CODEWITHSUNDEEP
htmlcssblogger
RkeyCapTheWise
RkeyCapTheWise

Reputation: 1

There is a gap between the list items, how can I fix it?

I'm making a website on blogger and I don't understand why when I create the menu bar it has a space between the elements in it, how do I remove it now?

This problem only appears on my blogger website, when I run the code with the HTML file, it will appear like this:

1

here's the image:

2

here's the code:

#menu2 {
  background-color: #ff8000;
}

#menu2 ul {
  background: #ff8000;
  text-align: center;
}

#menu2 li {
  color: #ff8000;
  display: inline-block;
  width: auto;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
}

#home {
  background-color: #ff8000;
}

#menu2 a {
  text-decoration: none;
  color: #000000;
  display: inline-block;
}

#menu2 a:hover {
  background: #ff8c19;
  color: #333;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="menu2">
    <ul>
      <li id="home"><a href="#">Home</a>
      </li>
      <li id="intro"><a href="#">Introduce</a>
      </li>
      <li id="news"><a href="#">News</a>
      </li>
      <li id="qa"><a href="#">Q&A</a>
      </li>
      <li id="software"><a href="#">Software</a>
      </li>
      <li id="guide"><a href="#">Tutorial</a>
      </li>
      <li id="design"><a href="#">Design</a>
      </li>
      <li id="video"><a href="#">Video</a>
      </li>
      <li id="contact"><a href="#">Contact</a>
      </li>
      <li><a href="#">Recruitment</a>
      </li>
    </ul>
  </div>
</body>

</html>

I want to remove the gap between the list items

Upvotes: 0

Views: 79

Answers (1)

Ankit
Ankit

Reputation: 1362

I suggest you, always use a flex box to align items using a flex box is easy and it always works.

.ull{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left :0px;
}
#menu2 ul li{
  list-style :none;
  margin-right:10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div id="menu2">
    <ul class="ull" >
      <li id="home"><a href="#">Home</a>
      </li>
      <li id="intro"><a href="#">Introduce</a>
      </li>
      <li id="news"><a href="#">News</a>
      </li>
      <li id="qa"><a href="#">Q&A</a>
      </li>
      <li id="software"><a href="#">Software</a>
      </li>
      <li id="guide"><a href="#">Tutorial</a>
      </li>
      <li id="design"><a href="#">Design</a>
      </li>
      <li id="video"><a href="#">Video</a>
      </li>
      <li id="contact"><a href="#">Contact</a>
      </li>
      <li><a href="#">Recruitment</a>
      </li>
    </ul>
  </div>
</body>

</html>

Hope this is what you are looking for, let me know if there is some query or if you want something else.

Upvotes: 2

Related Questions