【问题标题】：Displaying icons side by side并排显示图标
【发布时间】：2022-03-06 15:39:36
【问题描述】：

我正在尝试在页脚中并排显示几个社交媒体图标。我尝试过使用 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; 
 }

【问题讨论】：

嗯..为什么他们在不同的uls？只需删除uls
另外，你的代码是无效的，你有没有结束的标签和具有相同 id 的多个元素
1) 删除所有无序列表。他们在那里没有充分的理由。 2) 您正在分配具有相同 ID (social_me) 的多个元素。为此使用课程。 3）看看是否能解决问题。如果是这样，请抬起脚并在室内戴上太阳镜 B)
我删除了 ul 标签并将其全部放入一个 div 中。它们仍然在另一个下方显示（而不是并排显示）。CSS 是否正确？

标签： html css css-float

【解决方案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

【讨论】：

我试过了，图标仍然在另一个下显示，而不是并排显示。
确保你做的一切都是正确的，因为在演示中我看到它们并排

【解决方案2】：

只是纠正一些html错误：

1) 去掉不必要的ul

2) 删除<a> 标签内的div

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>

【讨论】：

我试过了，图标仍然在另一个下显示，而不是并排显示。
是的。检查我的答案...除非容器太小，否则您必须向容器添加一个属性，例如：.columns { white-space: nowrap; }

【解决方案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>

【讨论】：

我试过了，图标仍然在另一个下显示，而不是并排显示。

【解决方案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;

}

【讨论】：

我试过了，图标仍然在另一个下显示，而不是并排显示。

【解决方案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>

【讨论】：

【解决方案6】：

我能够通过创建三个不同的无序列表来使其工作。我用过：

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

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

【讨论】：

【解决方案7】：

.title-logo{
    color: #5E81F4;
    font-family: 'Inter', sans-serif;
     margin-left: 10px;
}
.logo a{
    display: flex;
    justify-content: start;
    align-items: center;
}

 <div class="logo">
            <a href="/#">
                <div class="shap-logo">
                    <H1>O</H1>
                </div>
                <h3 class="title-logo">Ohara</h3>
            </a>
           </div>

我为我的代码尝试了这个，但我不知道它是否正确。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。