并排显示图标
[英]Displaying icons side by side
问题描述
I am trying to display several social media icons side by side in a footer.
我正在尝试在页脚中并排显示多个社交媒体图标。 I have tried using the float: left property which did not work.我试过使用 float: left 属性，但没有用。 Can someone spot my error?有人能发现我的错误吗？
I have the following html code:我有以下 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>
And the following CSS:以及以下 CSS：
.social_me {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 30px;
}
7 个解决方案
解决方案1
0 2014-07-01 20:58:07
Remove unnecessary ul tags and add li to each item删除不必要的ul标签并为每个项目添加li
CSS: CSS：
ul li {
display:inline-block;
}
HTML: 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
0 2014-07-01 20:59:46
Just correcting some html errors:只是纠正一些 html 错误：
1) Remove the unnecessary ul 1）去掉不需要的ul
2) Remove the div inside the <a> tags 2）删除<a>标签内的div
3) Your id="social_me" is wrong.. It is a class, not an id. 3) 你的id="social_me"是错误的。它是 class，不是 id。
4) After that, no need for css what so ever ( <a> and <img> tags are already inline elements by default): http://jsfiddle.net/M665q/ 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>
解决方案3
0 2014-07-01 21:00:42
Put them all in one <ul> and the <div> tags next to the images was messing it up.将它们全部放在一个<ul>中，图像旁边的<div>标签会把它搞砸。
Something like this should work:这样的事情应该有效：
<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
0 2014-07-01 21:00:55
<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
0 2014-07-01 23:29:27
it sounds like you're having a problem linking your CSS to your HTML page.听起来您在将 CSS 链接到 HTML 页面时遇到问题。 Try putting it into the head.试着把它放在头上。
<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
0 2014-07-03 19:07:39
I was able to get it working by creating three different unordered lists.我能够通过创建三个不同的无序列表来让它工作。 I used:我用了：
.column {
float:left;
padding: 10px 20px 0px 10px;
}
ul{
list-style-type:none;
padding-left:0px;
text-decoration:none;
padding-top: 10px;
}
解决方案7
0 2022-03-06 07:39:36
.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> I tried this for my code, but I don't know it's correct or not.我为我的代码试过这个，但我不知道它是否正确。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.