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

Html – Css: how to equally space images in a navbar?

In one horizontal navbar i have small images that are spaced out with different spaces. Between one image and another there is a different empty space.

I would like to get the same empty space between each image in this horizontal navbar, instead the problem is that now the images are positioned with different spaces from each other. The result I would like to get is this screenshot. Thank you

I tried with various justify-content, but got nothing.

You can also take a look at Codepen here

HTML

<!doctype html>
<html lang="it">
  <head>

    <!-- Boostrap Files -->  
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

    <!-- My Css -->  
</head>

<body>

    <div class="my-container">
        <nav class="navbar bg-body-tertiary my-flex">
            <div class="container-fluid">



                <li>
                    <a class="atalanta disable" href="roma.html" title="Atalanta" width="35" height="35">
                    <font style="vertical-align: inherit;">atalanta</font>
                    </a>
                </li>

                <li>
                    <a class="bologna disable" href="roma.html" title="Bologna" width="35" height="35">
                    <font style="vertical-align: inherit;">bologna</font>
                    </a>
                </li>

                <li>
                    <a class="cremonese disable" href="roma.html" title="Cremonese" width="35" height="35">
                    <font style="vertical-align: inherit;">cremonese</font>
                    </a>
                </li>
                    

                <li>
                    <a class="empoli disable" href="roma.html" title="Empoli" width="35" height="35">
                    <font style="vertical-align: inherit;">empoli</font>
                    </a>
                </li>



                <li>
                    <a class="fiorentina disable" href="roma.html" title="Fiorentina" width="35" height="35">
                    <font style="vertical-align: inherit;">fiorentina</font>
                    </a>
                </li>


                <li>
                    <a class="verona disable" href="roma.html" title="Verona" width="35" height="35">
                    <font style="vertical-align: inherit;">verona</font>
                    </a>
                </li>


                <li>
                    <a class="inter disable" href="roma.html" title="Inter" width="35" height="35">
                    <font style="vertical-align: inherit;">inter</font>
                    </a>
                </li>

                <li>
                    <a class="juventus disable" href="roma.html" title="Juventus" width="35" height="35">
                    <font style="vertical-align: inherit;">juventus</font>
                    </a>
                </li>


                <li>
                    <a class="lazio disable" href="roma.html" title="Lazio" width="35" height="35">
                    <font style="vertical-align: inherit;">lazio</font>
                    </a>
                </li>

                <li>
                    <a class="lecce disable" href="roma.html" title="Lecce" width="35" height="35">
                    <font style="vertical-align: inherit;">lecce</font>
                    </a>
                </li>

                <li>
                    <a class="milan disable" href="roma.html" title="Milan" width="35" height="35">
                    <font style="vertical-align: inherit;">milan</font>
                    </a>
                </li>

                <li>
                    <a class="monza disable" href="roma.html" title="Monza" width="35" height="35">
                    <font style="vertical-align: inherit;">monza</font>
                    </a>
                </li>

                <li>
                    <a class="napoli disable"  title="Napoli" width="35" height="35">
                    <font style="vertical-align: inherit;">napoli</font>
                    </a>
                </li>


                <li>
                    <a class="roma disable" href="roma.html" title="Roma" width="35" height="35">
                    <font style="vertical-align: inherit;">roma</font>
                    </a>
                </li>

                <li>
                    <a class="salernitana disable" href="roma.html" title="Salernitana" width="35" height="35">
                    <font style="vertical-align: inherit;">salernitana</font>
                    </a>
                </li>

                <li>
                    <a class="sampdoria disable" href="roma.html" title="Sampdoria" width="35" height="35">
                    <font style="vertical-align: inherit;">sampdoria</font>
                    </a>
                </li>


                <li>
                    <a class="sassuolo disable" href="roma.html" title="Sassuolo" width="35" height="35">
                    <font style="vertical-align: inherit;">sassuolo</font>
                    </a>
                </li>

                <li>
                    <a class="spezia disable" href="roma.html" title="Spezia" width="35" height="35">
                    <font style="vertical-align: inherit;">spezia</font>
                    </a>
                </li>


                <li>
                    <a class="torino disable" href="roma.html" title="Torino" width="35" height="35">
                    <font style="vertical-align: inherit;">torino</font>
                    </a>
                </li>

                <li>
                    <a class="udinese disable" href="roma.html" title="Udinese" width="35" height="35">
                    <font style="vertical-align: inherit;">udinese</font>
                    </a>
                </li>  

            </div>
        </nav>

    </div>


      

</body>
</html>

CSS

.my-container {
    display: flex; 
    max-width: 1080px;
    margin-left: auto;
    margin-right: auto;
}

.my-flex {
    display: flex;
    flex-wrap: nowrap;
}

.disable {
    display: block;
    overflow: hidden;
    text-decoration: none;
    text-indent: 110%;
}



li {
    list-style-type: none;
}

.atalanta {
    background: url('https://i.ibb.co/MfVyXRY/atalanta.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  
  }
  
  .bologna {
    background: url('https://i.ibb.co/sttS1T9/bologna.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  
  }
  
  .cremonese {
    background: url('https://i.ibb.co/W6N0Jwg/cremonese.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  
  }
  
  .empoli {
    background: url('https://i.ibb.co/Yyjycb5/empoli.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .fiorentina {
    background: url('https://i.ibb.co/dmMF3Hw/fiorentina.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .verona {
    background: url('https://i.ibb.co/cbRzLK3/hellas.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .inter {
    background: url('https://i.ibb.co/4wbLqYd/inter.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .juventus {
    background: url('https://i.ibb.co/42ChC8w/juve.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  
  .lazio {
    background: url('https://i.ibb.co/CPPntPm/lazio.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .lecce {
    background: url('https://i.ibb.co/2KLGvzK/lecce.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .milan {
    background: url('https://i.ibb.co/gWXyj17/milan.png') no-repeat 50%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .monza {
    background: url('https://i.ibb.co/WxFDdJk/monza.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .napoli {
    background: url('https://i.ibb.co/LYVKhx0/napoli.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .roma {
    background: url('https://i.ibb.co/gj9Nj4x/roma.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .salernitana {
    background: url('https://i.ibb.co/RYMzs5L/salernitana.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .sampdoria {
    background: url('https://i.ibb.co/vwGYGc9/sampdoria.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .sassuolo {
    background: url('https://i.ibb.co/CHXBS7X/sassuolo.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .spezia {
    background: url('https://i.ibb.co/QJ8S2KY/spezia.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .torino {
    background: url('https://i.ibb.co/wYKTSGW/torino.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
  
  .udinese {
    background: url('https://i.ibb.co/bWFBx1V/udinese.png') no-repeat 0%;
    background-size: 35px 35px;
    padding-top: 18px;
  }
Tags:

2

Answers


  1. 0

    Use these properties in the navbar class you want:

    display: flex;
flex-direction: column;
justify-content: space-evenly;
    Login or Signup to reply.
  2. 0

    The problem is that there isn’t a valid defined width, only your invalid attempt of <a ... width="35" height="35">

    You should declare the width of the block-level lis. Here’s a starting point:

    li {
    list-style-type: none;
    width: 35px;
}

    (This time, I’m spending time only on answering your main question and not correcting your markup.)

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

Back To Top
Search