如何将图片上方的社交媒体图标排成一行？

时间：2016-01-02 05:25:07

标签： html css

Image

我想知道我如何在每张图片的左上方和左边有3个社交媒体图标，但与图像一致。以下是我的代码。

＆＃13;
＆＃13; 
body {
	background-color: #1a1a1a;
}

#downloadbutton{
	width:127px;
	height:48px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}

#downloadbuttonhover:hover{
	color:#fff;
	background-color: #b40000;
	opacity:0.9;
}


.buttonDownload{
	display: inline-block;
	position: relative;
	padding: 10px 25px;
  
	background-color: #b30000;
	color: white;
  
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	font-size: 0.9em;
	text-align: center;
	text-indent: 15px;
}

.buttonDownload:hover {
	background-color: #333;
	color: white;
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:before {
	border-color: #b30000;
}

.buttonDownload:hover:after {
	border-top-color: #b30000;
	animation-play-state: running;
}

.clearfix {
  clear: both;
}

.divWithBtn {
	display: inline-block;
}

.divWithBtn a{
  display: block;
  margin: 0 auto;
}
＆＃13; 
<div class="container">
</br>
	<span class="textformat1"><center><b>Albums</b></span></center>
</br>



<div id="sharebar">
    <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="www.tekmillion.com" data-text="TekMillion - Download Albums http://www.tekmillion.com/albums.html" data-via="tekmill">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<hr>
<div class="fb-share-button" data-href="http://www.tekmillion.com/albums.html" data-layout="button_count"></div>
</div>
<script>var switchTo5x=true;</script>
<script src="//w.sharethis.com/button/buttons.js"></script>



<center>
	<div class="clear">
		<div class="divWithBtn">
			<img src="socialmedia/twitterwhiteandblack.png" alt="twitterwhiteandblack" width="30" height="30">
			<img src="socialmedia/googlepluswhiteandblack.png" alt="googlepluswhiteandblack" width="30" height="30">
			<img src="socialmedia/facebookwhiteandblack.png" alt="facebookwhiteandblack" width="30" height="30">
			<img src="images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" 					width="200" height="200">
		<a href="LONDON%202%20TURKEY%20VOL.1.zip">
			<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT%20COVER).jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT		%20COVER)" width="200" height="200" border:none;>
			<a href="LONDON%202%20TURKEY%20VOL.2.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
	</div>
		<div class="divWithBtn">
			<img src="images/Love%20%26%20Hate%20Volume.1%20(Front%20Cover).JPG" alt="Love%20%26%20Hate%20Volume.1%20(Front					%20Cover)" width="200" height="200">
		<a href="LOVE%20%26%20HATE%20VOL.1.zip">
	<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	<div class="divWithBtn">
		<img src="images/Gurbet%20Eli%20Volume.1%20(Front%20Cover).JPG" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="200" 		height="200">
	<a href="GURBET%20ELI%20VOL.1.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
		</div>
	</div>
</center>
</br>
</div>
＆＃13;
＆＃13;
＆＃13;

您可以在链接中看到相册图片和链接：http://tekmillion.com/albums.html

感谢。

1 个答案:

答案 0 :(得分：0)

将您的图标放在课程.divWithBtn的新div中。

注意：这里我设置了减少高度和宽度以显示它。

＆＃13;
＆＃13; 
body {
	background-color: #1a1a1a;
}

#downloadbutton{
	width:127px;
	height:48px;
	text-align: center;
	/* text-indent:-9999px; */
	border:none;
	margin-top:20px;
	cursor:pointer;
}

#downloadbuttonhover:hover{
	color:#fff;
	background-color: #b40000;
	opacity:0.9;
}


.buttonDownload{
	display: inline-block;
	position: relative;
	padding: 10px 25px;
  
	background-color: #b30000;
	color: white;
  
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	font-size: 0.9em;
	text-align: center;
	text-indent: 15px;
}

.buttonDownload:hover {
	background-color: #333;
	color: white;
}

.buttonDownload:before, .buttonDownload:after {
	content: ' ';
	display: block;
	position: absolute;
	left: 15px;
	top: 52%;
}

/* Download box shape  */
.buttonDownload:before {
	width: 10px;
	height: 2px;
	border-style: solid;
	border-width: 0 2px 2px;
}

/* Download arrow shape */
.buttonDownload:after {
	width: 0;
	height: 0;
	margin-left: 3px;
	margin-top: -7px;
  
	border-style: solid;
	border-width: 4px 4px 0 4px;
	border-color: transparent;
	border-top-color: inherit;
	
	animation: downloadArrow 2s linear infinite;
	animation-play-state: paused;
}

.buttonDownload:hover:before {
	border-color: #b30000;
}

.buttonDownload:hover:after {
	border-top-color: #b30000;
	animation-play-state: running;
}

.clearfix {
  clear: both;
}

.divWithBtn {
	display: inline-block;
  width: 100px;
}

.divWithBtn a{
  display: block;
  margin: 0 auto;
}

.socialIcon > a{
  display:inline;
  }
＆＃13; 
<div class="container">
</br>
	<span class="textformat1"><center><b>Albums</b></span></center>
</br>



<div id="sharebar">
    <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="www.tekmillion.com" data-text="TekMillion - Download Albums http://www.tekmillion.com/albums.html" data-via="tekmill">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<hr>
<div class="fb-share-button" data-href="http://www.tekmillion.com/albums.html" data-layout="button_count"></div>
</div>
<script>var switchTo5x=true;</script>
<script src="//w.sharethis.com/button/buttons.js"></script>



<center>
	<div class="clear">
        <div class="divWithBtn">
			<img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="london%20To%20Turkey%20-%20Front%20Cover" 					width="100" height="100">
		<a href="LONDON%202%20TURKEY%20VOL.1.zip">
			<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
          <div class="socialIcon">
            <a href="link">
           <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30"></a>
            <a href="link">
			<img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30"></a>
            <a href="link">
			<img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30"></a>
        </div> 
		</div>
	<div class="divWithBtn">
		<img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="LONDON%20TO%20TURKEY%20VOLUME%202%20(FRONT		%20COVER)" width="100" height="100" border:none;>
			<a href="LONDON%202%20TURKEY%20VOL.2.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
        <div class="socialIcon">
           <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30">
        </div>  
	</div>
		<div class="divWithBtn">
			<img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="Love%20%26%20Hate%20Volume.1%20(Front					%20Cover)" width="100" height="100">
		<a href="LOVE%20%26%20HATE%20VOL.1.zip">
	<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
          <div class="socialIcon">
           <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30">
        </div> 
		</div>
	<div class="divWithBtn">
		<img src="http://tekmillion.com/images/london%20To%20Turkey%20-%20Front%20Cover.jpg" alt="Gurbet%20Eli%20Volume.1%20(Front%20Cover)" width="100" 		height="100">
	<a href="GURBET%20ELI%20VOL.1.zip">
		<img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50"></a>
      <div class="socialIcon">
           <img src="http://tekmillion.com/images/Twitter.png" alt="twitterwhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="googlepluswhiteandblack" width="30" height="30">
			<img src="http://tekmillion.com/images/Twitter.png" alt="facebookwhiteandblack" width="30" height="30">
        </div> 
		</div>
	</div>
</center>
</br>
</div>
＆＃13;
＆＃13;
＆＃13;

修改

根据您的要求，将您的图标添加到代码中我将其放在socialIcon div中。并把它放在下载按钮下面。

您可以将图像放在锚标记内。

并给出以下css链接线。

.socialIcon > a{
  display:inline;
  }
相关问题
最新问题