Icone non allineate correttamente nella barra di navigazione

[Jakub Lemiszewski]

Salve,

Ho il seguente problema le icone della barra di navigazione non si allineano e non riesco a capire come mai. VOrrei avere le icone tutte sulla stessa linea con la scritta sotta come da esempio nella immagine. Grazie dell'aiuto

HTML

<nav><!--NAVIGATION-->
			 <ul id="bar">
				 <!--<li><a href="#">☰</a>MOBILE -->
				 <li><a href="#box1"><img src="../img/pictogram-information.png" alt="pictogram-information"><span>Praktis</span></a></li>
				 <li><a href="#box2"><img src="../img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01"><span>Udstillinger</span></a></li>
				 <li><a href="#box3"><img src="../img/pictogram-uddannelse.png" alt="pictogram-uddannelse"><span>Undervisning</span></a></li>
				 <li><a href="#box4"><img src="../img/pictogram-science_01.png" alt="pictogram-science_01"><span>Sjovt nok klogere</span></a></li>
				 <li><a href="#box5"><img src="../img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05"><span>Fest & konference</span></a</li>
				 <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
			 </ul>	
		</nav> <!--END-->

CSS

nav {
	 position: relative;
	 width:100%;
	 height:150px;
	 border: 2px black solid;
	 word-spacing: 0;
	 left: 0px;
	 top: 0px;
	 background: red;
	 z-index: 100;
 }
 
 ul#bar {
	 position: relative;
	 max-width: 100%; 
	 min-width: 50%;
 }
 
 #bar li {
 list-style: none;
 display: inline-block;
 margin-left: 4%;
 width: 15%;
 height: 150px;
 }
 #bar li a {
	 position: relative;
	 width: 100%;
 }
 span {
	 position: relative;
	 top:20px;
	 text-decoration: none;
	 text-align: center;
	 font-size: 18px;	
	  }

 

[criric]

Ciao, provalo cosi

<style>
    nav {
        width:100%;
        height:150px;
        border: 2px black solid;
        word-spacing: 0;
        background: red;
        z-index: 100;
    }

    ul#bar {
        max-width: 100%; 
        min-width: 50%;
    }

    #bar li {
        list-style: none;
        display: inline-block;
        margin-left: 4%;
        width: 15%;
        height: 150px;
    }
    #bar li img {
        width:90px;
        height:90px;
        float: left;
    }
    #bar li a {
        width: 100%;
    }
    span {
        display: block;
        clear: both;
        text-decoration: none;
        font-size: 18px;	
    }
</style>
<nav><!--NAVIGATION-->
    <ul id="bar">
        <!--<li><a href="#">☰</a>MOBILE -->
        <li>
            <a href="#box1">
                <img src="http://forum.mrwebmaster.it/img/pictogram-information.png" alt="pictogram-information">
            </a>
            <span>Praktis</span>
        </li>
        <li><a href="#box2">
                <img src="http://forum.mrwebmaster.it/img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01">
            </a>
            <span>Udstillinger</span>
        </li>
        <li><a href="#box3">
                <img src="http://forum.mrwebmaster.it/img/pictogram-uddannelse.png" alt="pictogram-uddannelse">
            </a>
            <span>Undervisning</span>
        </li>
        <li><a href="#box4">
                <img src="http://forum.mrwebmaster.it/img/pictogram-science_01.png" alt="pictogram-science_01">
            </a>
            <span>Sjovt nok klogere</span>
        </li>
        <li><a href="#box5">
                <img src="http://forum.mrwebmaster.it/img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05">
            </a>
            <span>Fest & konference</span>
        </li>
        <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
    </ul>	
</nav> <!--END-->

ho dato una dimensione alle img giusto per vedere l'effetto visto che non avevo le immagini, puoi toglierle se le immagini hanno tutte le stesse dimensioni

 

[Jakub Lemiszewski]

Ciao, provalo cosi

<style>
    nav {
        width:100%;
        height:150px;
        border: 2px black solid;
        word-spacing: 0;
        background: red;
        z-index: 100;
    }

    ul#bar {
        max-width: 100%; 
        min-width: 50%;
    }

    #bar li {
        list-style: none;
        display: inline-block;
        margin-left: 4%;
        width: 15%;
        height: 150px;
    }
    #bar li img {
        width:90px;
        height:90px;
        float: left;
    }
    #bar li a {
        width: 100%;
    }
    span {
        display: block;
        clear: both;
        text-decoration: none;
        font-size: 18px;	
    }
</style>
<nav><!--NAVIGATION-->
    <ul id="bar">
        <!--<li><a href="#">☰</a>MOBILE -->
        <li>
            <a href="#box1">
                <img src="http://forum.mrwebmaster.it/img/pictogram-information.png" alt="pictogram-information">
            </a>
            <span>Praktis</span>
        </li>
        <li><a href="#box2">
                <img src="http://forum.mrwebmaster.it/img/pictogram-udstillinger_01.png" alt="pictogram-udstillinger_01">
            </a>
            <span>Udstillinger</span>
        </li>
        <li><a href="#box3">
                <img src="http://forum.mrwebmaster.it/img/pictogram-uddannelse.png" alt="pictogram-uddannelse">
            </a>
            <span>Undervisning</span>
        </li>
        <li><a href="#box4">
                <img src="http://forum.mrwebmaster.it/img/pictogram-science_01.png" alt="pictogram-science_01">
            </a>
            <span>Sjovt nok klogere</span>
        </li>
        <li><a href="#box5">
                <img src="http://forum.mrwebmaster.it/img/pictogram-festogkonference_05.png" alt="pictogram-festogkonference_05">
            </a>
            <span>Fest & konference</span>
        </li>
        <!--<li><a href="child.html">Børnezonen</a></li>EXTERNAL LINK--> 
    </ul>	
</nav> <!--END-->

ho dato una dimensione alle img giusto per vedere l'effetto visto che non avevo le immagini, puoi toglierle se le immagini hanno tutte le stesse dimensioni

Grazie ho risolto cosi :-D