Html Question posted in
Some basic documentation can be found here.

Html – How do I fill the width evenly?

I wanted to put border that separates the elements on a simple navigation bar. But the border is appearing on wrong place.

* {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

nav ul {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  border: 1px solid #100;
}

nav {
  background: bisque;
}

li a {
  text-decoration: none;
  color: #100;
  line-height: 3rem;
  font-size: 2rem;
}

li {
  border-right: 1px solid #100;
}
<nav>
  <ul>
    <li><a href="go.html">Home</a></li>
    <li><a href="go.html">Extra</a></li>
    <li><a href="go2.html">Food</a></li>
    <li><a href="go2.html">Drinks</a></li>
    <li><a href="go2.html">About</a></li>
  </ul>
</nav>

I want a border on side that appears right in the middle of all the spaces between the elements.

Tags:

2

Answers


  1. 0

    Allow li elements to grow using flex: 1.

    Also remove border from last li (or first, as in my example) as it’s not needed.

    Usually you want some more spacings before first and last elements, so add padding on ul

    * {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

nav ul {
  display: flex;
  flex-direction: row;
  /* justify-content: space-evenly; */
  border: 1px solid #100;
  
  /* Add spacings before first and after last elements */
  padding: 0 15px;
}

nav {
  background: bisque;
}

li a {
  text-decoration: none;
  color: #100;
  line-height: 3rem;
  font-size: 2rem;
}

li {
  flex: 1;
  text-align: center;
}

/* OR :not(:last-child) */
li + li {
  border-left: 1px solid #100;
}
    <nav>
  <ul>
    <li><a href="go.html">Home</a></li>
    <li><a href="go.html">Extra</a></li>
    <li><a href="go2.html">Food</a></li>
    <li><a href="go2.html">Drinks</a></li>
    <li><a href="go2.html">About</a></li>
  </ul>
</nav>
    Login or Signup to reply.
  2. 0

    Just give the li a width of 100%

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search