Html 在同一行显示图标和文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18799207/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display icons and text on the same line
提问by Dano007
I'm trying to get the text (Home, About Us, Cheese) etc to display to the right of the social media icons, so that the base of the text is aligned with the base of the icons and they appear on the same line.
我试图让文本（主页、关于我们、奶酪）等显示在社交媒体图标的右侧，以便文本的底部与图标的底部对齐，并且它们出现在同一行.
How do I do this?
我该怎么做呢？
My code is in fiddle here http://jsfiddle.net/pnX3d/
我的代码在这里http://jsfiddle.net/pnX3d/
<div class="grid_5" id="social_icons">
<a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
</div>
<nav class="topmenu omega">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About Us</a> |</li>
<li><a href="#">Cheeses</a></li>
</ul>
</nav>
采纳答案by Mamun
I have achieved that with the following code:
我使用以下代码实现了这一点：
.container-header{
line-height: 1.22;
}
#social_icons {
padding: .5em;
display: inline-block;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
}
.topmenu.omega{
float:right;
}
ul{
margin: 0;
}
li>a
{
font-size: 20px;
}<div class="container-header">
<div class="grid_5" id="social_icons">
<a href="http://fontawesome.io/icon/address-book/" target="blank"><img src="img/facebook.png" alt="Facebook"></a>
<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Twitter"></a>
<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Pininterest"></a>
<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
</div>
<nav class="topmenu omega">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About Us</a> |</li>
<li><a href="#">Cheeses</a></li>
</ul>
</nav>
</div>回答by DevlshOne
These changes in your CSS should do the trick:
CSS 中的这些更改应该可以解决问题：
#social_icons {
padding: .5em;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
.topmenu li {
display:inline-block;
font-size: 1.5em;
text-align: right;
line-height: 1.22;
float:left;
vertical-align:bottom;
}
回答by Kai Feller
Add float: leftto #social_iconsand .topmenu li.
添加float: left到#social_icons和.topmenu li。
Here's a demo: http://jsfiddle.net/ZsJbJ/.
这是一个演示：http: //jsfiddle.net/ZsJbJ/。
Hope that helps!
希望有帮助！
回答by Dano007
Thanks for your input, but I actually ended up using the following. As this isn't a production site and I'm only experimenting I wanted to use flex columns. The below actually reduces the code required as well.
感谢您的投入，但我实际上最终使用了以下内容。由于这不是一个生产站点，我只是在试验我想使用 flex 列。下面实际上也减少了所需的代码。
HTML
HTML
<div id="social_icons">
<a href="http://www.facebook.com/print3dexpert" target="blank"><img src="img/facebook.png" alt="Click to visit us on Facebook"></a>
<a href="http://www.twitter.com/print3dexpert" target="blank"><img src="img/twitter.png" alt="Click to visit us on Twitter"></a>
<a href="http://pinterest.com/print3dexpert" target="blank"><img src="img/pinterest.png" alt="Click to visit us on Pininterest"></a>
<a href="#"><img src="img/email.png" title="Click to contact us" alt="Contact us"></a>
<nav class="topmenu omega">
<ul>
<li><a href="#">Home</a> |</li>
<li><a href="#">About Us</a> |</li>
<li><a href="#">Cheeses</a></li>
</ul>
</nav>
</div>
CSS
CSS
#social_icons {
padding: .5em;
line-height: 2.7;
-webkit-columns: 150px 2;
font-size: 1.2em;
}
.topmenu li {
display:inline-block;
}
回答by noob
Float the .topmenuto rightand #social_iconsto the left. Give padding-left:0;for the uland give display:inline-blockfor .topmenu. Please check it in fiddle
http://jsfiddle.net/pnX3d/10/
浮.topmenu来right和#social_icons左侧。给padding-left:0;了ul，并给display:inline-block了.topmenu。请检查小提琴
http://jsfiddle.net/pnX3d/10/
