Menu with space between li’s

Asked

Viewed 811 times

5

My menu has spaces between the li’s. I’m using a reset css, but even though I didn’t need to already tried to put margin: 0; and padding: 0; na ul and ul li and it didn’t work, if you can help me I appreciate it. Follows the code:

https://jsfiddle.net/790zj6r4/1/

html css menu
  • 1

    Take a look at this post, it explains the mistake you’re having: CSS-Tricks.

  • Puts font-size: 0 in the ul.

  • 1

    The post that Douglas Garrido shared elucidates the issue, but in my opinion leaving the negative margin is still the most elegant solution, margin-right: -5px; no li;

  • Thanks! Both forms worked, the difference is that the negative margin keeps an "invisible" space that is only perceived when passing the mouse over and the font-size completely eliminates spacing

1 answer

1

This is an interesting question, it happens because with the inline block display the elements give a sense when you break the line of code, follows a way to solve:

.header-menu {
	height: auto;
}

.header-menu ul li {
	height: auto;
	display: inline-block;
	background: red;
}

.header-menu ul li a {
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 60px;
	padding: 0 10px;
}
<nav class="header-menu">
  <ul>
    <li><a href="ps4.html">PS4</a></li
     ><li><a href="xboxone.html">XBOX ONE</a></li
    ><li><a href="pc.html">PC</a></li
    ><li><a href="outrosconsoles.html">Outros Consoles</a></li
    ><li><a href="esports.html">eSports</a></li
    ><li><a href="reviews.html">Reviews</a></li
    ><li><a href="videos.html">Vídeos</a></li>
  </ul>
</nav>

This 'gambiarra' that I did joins all the tags without breaking the line, and this margin that gave is over, there are other ways to solve, take a look in this css post.

  • 1

    Welcome to Stackoverflow in English. I edited your question to remove the greetings as "I hope I helped" because we usually keep them as clean as possible to focus on your scheduling question. If you are interested in visiting a part of the site that is not aimed to ask questions can know the [chat]. If you have questions about the operation, rules and procedures of the site visit the Stack Overflow in Portuguese Meta :)

  • @Wallacemaxters ok thanks you :)

Browser other questions tagged html css menu

You are not signed in. Login or sign up in order to post.