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![Smile :) :)](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
![Screen Shot 2014-03-10 at 23.06.16.jpg Screen Shot 2014-03-10 at 23.06.16.jpg](https://forum.mrw.it/data/attachments/1/1696-ce7e8cfe9505fe95a1c6a53e8e228286.jpg)
HTML
CSS
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
![Screen Shot 2014-03-10 at 23.06.16.jpg Screen Shot 2014-03-10 at 23.06.16.jpg](https://forum.mrw.it/data/attachments/1/1696-ce7e8cfe9505fe95a1c6a53e8e228286.jpg)
HTML
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-->
Codice:
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;
}