How to place navigation bar links in one line?

Question

How can I place them in one line next to each other? Here's a link, Any help would appreciated!

body {
  background-color: white;
}

ul {
  list-style-type: none;
  text-align: center;
  margin: 0auto;
  padding: 0px;
  display: block;
  overflow: hidden;
}

li a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

You might find the answer at http://stackoverflow.com/questions/3790202/css-list-inline-is-not-listing-items-horizontally — Cameron, Apr 27 '17 at 19:27

score 3 · Accepted Answer · answered Apr 27 '17 at 19:11

There are many options, e.g.

Inline block:

li {
  display: inline-block;
}

Flexbox:

ul {
  display: flex;
}

Float:

ul:after {
  content: "";
  display: table;
  clear: both;
}
li {
  float: left;
}

CSS table:

ul {
  display: table;
}
li {
  display: table-cell;
}

score 0 · Answer 2 · answered Apr 27 '17 at 19:16

If you want to keep that background on that inline-block for the li remove it from the li a and instead put it on the ul

body { background-color:white;
}
ul { list-style-type:none; text-align:center; margin:0auto; padding:0px; display:block; overflow:hidden; background:#dddddd;}   
 
li { display:inline-block; }

li a {display:block; padding:8px; background-color: #dddddd;}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="prova.css">
</head>
<body>
<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>

</html>

How to place navigation bar links in one line?

2 Answers2