2016-07-16 7 views
1

https://jsfiddle.net/ets9rmw9/1/Hinzufügen Raum zwischen anklickbare Bilder ohne den Randraum klickbare

In Bezug auf die Symbole in der rechten oberen Ecke der Website, ich versuche, etwas Platz zwischen ihnen zu setzen, aber wenn ich die Margen platziere sie aus, der Randbereich wird ebenfalls anklickbar, das ist nicht genau das, was ich möchte. Ich kann nicht herausfinden, wie man den Abstand zwischen ihnen schafft, ohne sie anklickbar zu machen, Padding und Ränder funktionieren nicht.

<div class="wrapper"> 
<img class="logo" src="Logo.png" /> 
<nav> 
<ul class="nav"> 
    <li class="navlist"><a href="#">Properties</a></li> 
    <li class="navlist"><a href="#">The Team</a></li> 
    <li class="navlist"><a href="#">Contact Us</a></li> 
</ul> 
</nav> 
<div class="imgs"> 
<a href="#" title="Twitter" alt=" Icon"><img src="twitter.png" /></a> 
<a href="#" title="Facebook" alt=" Icon"><img src="facebook.png" /></a> 
<a href="#" title="Instagram" alt=" Icon"><img src="instagram.png" /></a> 
</div> 
</div> 
<footer> 
<p class="buttons">Real estate</p> 
</footer> 


body { 
background-color: #ffffff; 
margin: 0; 
display: table; 
height: 100%; 
width: 100%; 
background-image: url(nice.jpg); 
background-size: 100% 100%; 
overflow: auto; 
} 

.wrapper { 
display: flex; 
flex-direction: row; 
justify-content: space-between; 
text-align: center; 
padding: 0px; 
height: auto; 
background-color: whitesmoke; 
} 

footer { 
background-color: #cbb492; 
display: table-row; 
height: 2px; 
text-align: center; 
} 

li a { 
text-decoration: none; 
font-variant: small-caps; 
color: black; 
} 

li:hover { 
background-color: #cbb492; 
border-bottom: 0.5px solid gray; 
} 

nav { 
padding-bottom: 2px; 
padding-top: 2px; 
background-color: whitesmoke; 
} 

.logo { 
height: 28px; 
width: 90px; 
z-index: -10; 
} 

p { 
color: white; 
font-size: 6px; 
text-align: left; 
padding-left: 20px; 
} 

.navlist { 
display: inline; 
padding-left: 30px; 
margin-left: 10px; 
margin-right: 10px; 
padding-right: 30px; 
padding-top: 5.3px; 
padding-bottom: 6.2px; 
} 

.nav { 
list-style: none; 
padding: 0; 
width: 100%; 
margin: 1px; 
top: 0px; 
margin-top: 3px; 
} 

.imgs { 
list-style: none; 
margin: 0; 
padding: 0px; 
float: right; 
width: 60px; 
height: 100%; 
padding-top: 5.5px; 
padding-bottom: 5.5px; 
} 

.imgs img { 
width: 20%; 
height: 20%; 
opacity: 0.7; 
margin-right: 5px; 
} 

.imgs img:hover { 
opacity: 1.0; 
} 
+1

Der kleine Raum rechts von jedem Bild anklickbar ist, aufgrund der Margen hatte ich –

Antwort

0

Bitte fügen Sie diese CSS:

.imgs img { 
display: inline-block; 
} 
0

display:inline-block Verwendet in img-Tag und fügen Marge in a Tag. Wie folgt aus:

.imgs img { 
    display:inline-block; 
} 
.imgs a{ 
    margin-right:5px;  
} 

Hier ist Ihr Update Geige Code: https://jsfiddle.net/ets9rmw9/3/

+0

fügte ich habe Probleme zu verstehen, warum die Herstellung Rand für .imgs img war anklickbar, aber es ist nicht für .imgs a –

+0

Denn wenn Sie Marge in img hinzufügen und img ist in einem Tag .. zu Platz kam in einem Tag ... so wird es anklickbar ... so Vermeiden Sie, Marge in img-Tag hinzuzufügen .. –

Verwandte Themen