Ciao a tutti, ho un problema nel posizionare gli elementi all'interno di un div.
Mi spiego meglio:
index.html
codice:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" media="all and (min-width: 940px)" href="style.css" type="text/css">
</head>
<body>
<div class="topnav">
<a href="mailto:Pdwfgjttdesign@gmail.com"><img src="images\email.ico" class="ico"></img></a>
<p class="textnav">Pdwfgjttdesign@gmail.com</p>
<a href="contatti.html"><img src="images\telefono.png" class="ico"></img></a>
<p class="textnav">+90 738 139 49 37</p>
<a href="#"><img src="images\fb.png" class="ico"></img></a>
<a href="#"><img src="images\ig.png" class="ico"></img></a>
</div>
<div style="padding-left:16px">
<h2>Top Navigation Example</h2>
<p>Some content..</p>
</div>
</body>
style.css
codice:
.ico { width: auto; height: 30px; ; }
.textnav {font: 20px Arial, serif; color: white; margin-left: 10%; margin-right: 10%; text-align: justify;}
.topnav {
display: flex;
overflow: hidden;
background-color: #333;
}
.topnav a {
margin: auto;
float: left;
color: #FFFFFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4CAF50;
color: white;
}
a:link {
font: 30px 'Avenir', Arial, serif;
color: #000000;
text-decoration: none;
}
a:visited {
color: #FFBF00;
}
a.selected {
/*text-shadow: 0px 0px 8px #000; */
color: red;
}
a:hover {
text-shadow: 0px 0px 8px #000;
}
body {
margin: 0;
background-color: #FFFFFF;
}
Il risultato è che tutti gli elementi sono equidistanti tra loro, e non so come fare ad affiancare l'icona delle email all'indirizzo e-mail, e quella del telefono al numero di telefono. Come potrei risolvere il problema?
Grazie per la disponibilità