Menu with space between li's [duplicate]

Navigation
5

My menu has spaces between li's. I'm using a reset css, but even though I do not need it I've tried to put margin: 0; and padding: 0; on ul and ul li and it did not work, if you can help me I appreciate it. Here is the code:

link

    
asked by anonymous 22.11.2016 / 14:33

1 answer

1

This is an interesting question, this is because with the display inline block the elements give a space when you break the line of the 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 made together all the tags without breaking the line, and this margin that ends, there are other ways to solve, take a look in this css tricks post .

    
22.11.2016 / 14:42
Capture the data corresponding to the index in the bank Is there a way to open an HTML page within a modal? As?