DEMO

Question

我试图在页脚中并排显示几个社交媒体图标。我试过使用float：left属性，但是没有用。有人可以发现我的错误吗？

我有以下HTML代码：

<div id="footer"> 
<div id="v_line"></div>

    <div class="social-popout">
    <div class="columns">
    <ul id="lpro">
        <a href="https://www.facebook.com/" target="_blank"><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></a>
     </ul>

    <ul>
        <a href="https://www.linkedin.com/" target="_blank"><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></a>
    </ul>

    <ul>
        <a href="https://plus.google.com/" target="_blank"><img id="social_me" src="googleplus.png" alt="Google Plus"></a>
    </ul>
    </div>
    </div>
</div>

以下CSS：

.social_me {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px; 
 }

Answer 1

删除不必要的ul代码并为每个项目添加li

CSS：

ul li {
    display:inline-block;
}

HTML：

<ul id="lpro">
    <li><a href="https://www.facebook.com/" target="_blank"><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></a>
    </li>
    <li><a href="https://www.linkedin.com/" target="_blank"><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></a>
    </li>
    <li><a href="https://plus.google.com/" target="_blank"><img id="social_me" src="googleplus.png" alt="Google Plus"></a>
    </li>
</ul>

DEMO

Answer 2

只是纠正一些HTML错误：

1）删除不必要的ul

2）删除div代码中的<a>

3）你的id="social_me"是错的..这是一个类，而不是id。

4）之后，不需要css（默认情况下<a>和<img>标签已经是内联元素）：http://jsfiddle.net/M665q/

<div id="footer">
    <div class="social-popout">
    <div class="columns">
        <a class="social_me" href="https://www.facebook.com/" target="_blank"><img src="facebook.png" alt="Facebook" /></a>
        <a  class="social_me" href="https://www.linkedin.com/" target="_blank"><img  src="linkedin.png" alt="Linked In" /></a>
            <a  class="social_me" href="https://plus.google.com/" target="_blank"><img src="googleplus.png" alt="Google Plus" /></a>
    </div>
    </div>
</div>

Answer 3

将它们全部放在一个<ul>中，图片旁边的<div>标签会弄乱它。

这样的事情应该有效：

<div id="footer"> 
    <div id="v_line"></div>
    <div class="social-popout">
        <div class="columns">
            <ul id="lpro">
                <a href="https://www.facebook.com/" target="_blank" class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></a>
                <a href="https://www.linkedin.com/" target="_blank" class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></a>
                <a href="https://plus.google.com/" target="_blank"><img id="social_me" src="googleplus.png" alt="Google Plus"></a>
            </ul>
        </div>
    </div>
</div>

Answer 4

<ul id="navlist">
<li><a href="https://www.facebook.com/" target="_blank"><div class="fbicon"><img id="social_me" src="facebook.png" alt="Facebook"></a></li>
<li><a href="https://www.linkedin.com/" target="_blank"><div class="linkedin_amandasopkin"><img id="social_me" src="linkedin.png" alt="Linked In"></a></li>
<li><a href="https://plus.google.com/" target="_blank"><img id="social_me" src="googleplus.png" alt="Google Plus"></a></li>
</ul>

#navlist li
{
display: inline;
list-style-type: none;
padding-right: 20px;
float: left;

}

Answer 5

听起来您在将CSS链接到HTML页面时遇到问题。试着把它放到头上。

<html>
<head>
<style type="text/css">
.lpro li {
float: left;
padding: .5em;
list-style-type: none;
}
</style>
</head>
<div id="footer"> 
<div class="social-popout">
<div class="columns">
<ul class="lpro">
<li><a href="https://www.facebook.com/" target="_blank"><img src="facebook.png" alt="Facebook"></a></li>
<li><a href="https://www.linkedin.com/" target="_blank"><img src="linkedin.png" alt="Linked In"></a></li>
<li><a href="https://plus.google.com/" target="_blank"><img src="googleplus.png" alt="Google Plus"></a></li>
</ul>
</div>
</div>
</div>
</html>

Answer 6

我能够通过创建三个不同的无序列表来实现它。我用过：

.column {
float:left;
padding: 10px 20px 0px 10px;
}

ul{
list-style-type:none;
padding-left:0px;
text-decoration:none;
padding-top: 10px;  
}

并排显示图标

6 个答案:

DEMO