Html css gaps between link buttons horizontally navbar

HTML & CSS
1 
 <nav class="menu">
                <button id="button" hidden onclick="toggle()"><img src="images/list.png"></img></button>
                <ul class="menu_list">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About me</a></li>
                    <li><a href="#">Projects</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
 
}
li
{
  /*float: left;*/
  display: inline;
}
/*Links buttons*/
a:link, a:visited {
  background-color: #353839;
  color: white;
  padding: 14px 90px;
  text-align: center;
  text-decoration: none;
  /*display: block;*/
  display: inline-block;
  border: 1px solid #555d50;
  font-size: 1rem;
  
}

a:hover, a:active {
  background-color: #006400;
}
2

3

I don’t want to use the declaration floating: left… i will try it online with display: inline.

4

Just give Font-size:0px to UL.

.menu_list{
  font-size: 0px;
}
1 Like
5

Try this:

<!doctype html><html lang="en-gb">
<head>
<title> asdf </title>
<style>
#menu {
	text-align: center;
}
#menu button {
	/* */
}
#menu ul
{
  list-style-type: none;
  display:  inline-block;
  border: dotted 1px RED;
  /*
  color: lime;
  font-size: 1.00em;
  text-align: center;
  font-size: 1rem; 
  margin: 0;
  padding: 0;
  */
 }
#menu ul li
{
  display: inline-block;
  width:   5.0em;
  margin:  0.42em 1em;
  padding: 0.42em;
  background-color: lime; color: RED;
  border-radius: 0.88em;
  /*
  text-align: center;
  */
}
/*Links buttons*/
#menu ul li a {
  text-decoration: none;
}
#menu ul li:link, 
#menu ul li:visited {
  /*
  text-decoration: none;
	  color: white;
  	background-color: #353839;
    padding: 14px 90px;
		display: block;
  	display: inline-block;
  	font-size: 1rem;
	*/
 	border: 1px solid #555d50;
}
#menu ul li:hover, 
#menu ul li:active {
  background-color: #ffff00;
  text-decoration: underline;
  /* 
  	background-color: #006400;
 */ 	
}
</style>
</head>

<body>

<nav id="menu">
	<button hidden onclick="toggle()">
		<img src="images/list.png" alt="#">
	</button>

	<ul class="menu_list">
		<li> <a href="#">Home</a> </li>
		<li> <a href="#">About me</a> </li>
		<li> <a href="#">Projects</a> </li>
		<li> <a href="#">Blog</a> </li>
		<li> <a href="#">Contact</a></li>
	</ul>
</nav>

</body>
</html>
6

Floating the list items is one way (the old way), but making the UL display:flex is the more modern way to do it.

2 Likes
7

I may be missing something here (apologies if I am) - if you just want space between the buttons can’t you just use

margin: 50px;

in the

a:link{
}

and using different values for margin left and right and top and bottom if required.
I agree that flexbox is the way to go especially with a view to making it responsive.

8

I believe the OP was trying to eliminate the gap between inline-block elements (which is akin to the space between words).

Display:flex or indeed the font-size zero hack will both eliminate the space :slight_smile:

3 Likes
9

Ah, I see. I didn’t get that from the post.

1 Like
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.