I am trying to create a horizontal navbar and I am trying to put the items in one line and horizontal. I have to create an unordered list and create some items in it and have a link for each text:

body {
  padding: 0px;
  margin: 0;
}

ul {
  background-color: rgb(94, 94, 94);
}

li {
  float: left;
}

a {
  display: block;
}

<ul>
  <li><a> Home </a></li>
  <li><a> About </a></li>
</ul>

then I should set the float for <li> to left and give a block display to <a> tags. But when I do this some CSS in <ul> does not work such as background-color, can u help me with it?

CodePudding user response：

You can use flexbox for this:

ul {
  list-style-type: none;
  display: flex;
}

li {
  padding: 5px;
}

<ul>
    <li><a> Home </a></li>
    <li><a> About </a></li>
</ul>

CodePudding user response：

without using flex or grid.

when you set the <li> to inline-block you do 3 things:

1. remove the dot before the list
2. put everything in a 1 line (inline)
3. if there isn't enough space, it will be block to like columns

now there isn't anymore the bug of background not displayed

don't make <a> to block if is nested in another element that isn't...
a child can style the parent
but if you style the parent then all child will be

body {
  margin: 0;
}


/* parent */

ul {
  background-color: rgb(94, 94, 94);
}


/* childs */

li {
  display: inline-block;
}

<ul>
  <!-- home -->
  <li>
    <a href="#"> Home </a>
  </li>
  <!-- about -->
  <li>
    <a href="#"> About </a>
  </li>
</ul>