Question

不确定这有什么问题，因为目前它没有响应CSS。它只是将所有图像和文本重叠在一起，图像是原始大小，而不是CSS中指示的50px乘50px。

HTML：

<p> Connect with Steven on </p>

<div class=socialmedialinks>

<a href="https://www.facebook.com/Established.in.1995" class=links> <img src="FBProfilePic.jpg" alt="Facebook">
    </a> Facebook      


<a href="http://twitter.com/stevenperkinsii" class=links> <img src="TwitterProfilePic.jpg" alt="Twitter">
    </a> Twitter


<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=links> <img src="LinkedInProfilePic.jpg" alt="LinkedIn"> 
    </a> LinkedIn



<a href="http://www.stevensperkins.wordpress.com/" class=links> <img src="WordPressProfilePic.jpg" alt="WordPress">
    </a> WordPress

</div>

CSS：

.socialmedialinks {text-align:justify; width:50px}
.links{
display: inline-block; width:50px; height:50px;
}

Answer 1

史蒂文你有一个你正在寻找的输出的例子吗？如果我理解你正在尝试做什么，你在这里遇到了各种各样的问题，这些问题会导致输出问题。

首先，您没有任何约束图像大小的样式，您需要以下样式定义：

.links img {
  max-width:50px;
  max-height:50px;
}

关于文本相对于图像的定位，您遇到了结构性问题，导致事物无法按照您希望的方式显示。你还需要用引号包围你的类名，尽管这不是一个因素。我已经稍微改造了你的代码以制作我认为你想要的东西，如果有什么细节我已经完成的不是你想要的东西让我知道，我会帮你找到你想要的地方：https://jsfiddle.net/7k5nn1n7/

Answer 2

这是你在尝试的事情：

<p> Connect with Steven on </p>
<div class="socialmedialinks">
<div class="links"><a href="https://www.facebook.com/Established.in.1995"><img alt="Facebooki" src="FBProfilePic.jpg">Facebook</a></div>
<div class="links"><a href="http://twitter.com/stevenperkinsii"><img alt="Twitter" src="TwitterProfilePic.jpg">Twitter</a></div>
<div class="links"><a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name"><img alt="LinkedIn" src="LinkedInProfilePic.jpg">LinkedIn</a></div>
<div class="links"><a href="http://www.stevensperkins.wordpress.com/"><img alt="WordPress" src="WordPressProfilePic.jpg">WordPress</a></div>
</div>

CSS：

.socialmedialinks {
  width:100%;
}
.links{
  float:left;
  padding-left:2%;
}
.links img {
  width:50px;
  height:50px;
}

Answer 3

您可以为每个链接指定一个类名。添加标题=＆＃34;＆＃34;用于链接而不是alt =＆＃34;＆＃34;。删除图片标签。您可以使用CSS将图像添加到链接。

这是html的代码：

<a href="https://www.facebook.com/Established.in.1995" class=facebook title="Face Book"></a>
<a href="http://twitter.com/stevenperkinsii" class=twitter title="Twitter"></a>
<a href="https://www.linkedin.com/in/steven-perkins-9319ba93?trk=hp-identity-name" class=linkedin title="Linkedin"></a>
<a href="http://www.stevensperkins.wordpress.com/" class=wordpress title="WordPress"></a>

这是CSS：

.socialmedialinks a:link,
    .socialmedialinks a:active
    .socialmedialinks a:visited{
        text-indent: -9999em;
        width:50px; 
        height:50px;
        margin-right: 3px;
        float: left;
        padding:0;
    }

    .facebook {background: url('FBProfilePic.jpg') no-repeat;}
    .twitter{background: url('TwitterProfilePic.jpg') no-repeat;} 
    .linkedin{background: url('LinkedInProfilePic.jpg') no-repeat;}
    .wordpress{background: url('WordPressProfilePic.jpg') no-repeat;}

如果您有任何疑问，请告诉我。感谢

Answer 4

尝试以下代码：

<强> HTML

<p>Connect With Steven on </p>
    <h4 class="social">
    <a href="#" class="link"><img src="facebook.jpg" alt="Facebook"></a>Facebook</h4>
    <h4 class="social">
    <a href="#" class="link"><img src="twitter.png" alt="Twitter"></a>Twitter</h4>
    <h4 class="social">
    <a href="#" class="link"><img src="youtube.png" alt="Youtube"></a>Youtube</h4>
    <h4 class="social">
    <a href="#" class="link"><img src="instagram.jpg" alt="Instagram"></a>Instagram</h4>

<强> CSS

img{
            height: 50px;
            width: 50px;
            margin-right: 4px;
        }
        h4{
            width: 150px;
            float:left;
        }

以下是小提琴示例：Fiddle

如何将图片放在彼此旁边

4 个答案: