CODEWITHSUNDEEP
htmlcss
user7909968
user7909968

Reputation:

How to place navigation bar links in one line?

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>

Upvotes: 2

Views: 11976

Answers (2)

Jorden
Jorden

Reputation: 163

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>

Upvotes: 0

Stickers
Stickers

Reputation: 78676

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;
}

Upvotes: 3

Related Questions