添加可點擊的圖像之間的空間，而不使餘量空間點擊

https://jsfiddle.net/ets9rmw9/1/添加可點擊的圖像之間的空間，而不使餘量空間點擊

在參考網站的右上角的圖標，我試圖把它們之間的一些空間，但是如果我用利潤率將它們分開，邊緣空間也變得可點擊，這不完全是我想要的。我似乎無法找到如何讓它們之間沒有可點擊的空間，填充和邊距不起作用。

<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; 
}

來源

2016-07-16 peter k

小空間，每個圖像的右側是點擊，由於利潤我已經加入 –

請添加此CSS：

.imgs img { 
display: inline-block; 
}

來源

2016-07-16 05:00:14 vignesh

在img標籤中使用display:inline-block和a標籤添加保證金。就像這樣：

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

這是你更新提琴代碼：https://jsfiddle.net/ets9rmw9/3/

來源

2016-07-16 05:05:20

我無法理解爲什麼製作.imgs img的保證金是可點擊的，但它不適用於.imgs a –

因爲如果你在img中添加保證金，並且img在標籤裏面..對空間來了一個標籤...所以它可以點擊...所以避免在img標籤中添加邊距.. –

添加可點擊的圖像之間的空間，而不使餘量空間點擊

回答

相關問題