我正在尝试将文本(Home,About Us,Cheese)等显示在社交媒体图标的右侧,以便文本的基础与图标的基础对齐并显示在同一条线。
我该怎么做?
我的代码在这里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>
答案 0 :(得分:1)
我通过以下代码实现了这一目标:
.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>
答案 1 :(得分:0)
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;
}
答案 2 :(得分:0)
答案 3 :(得分:0)
感谢您的投入,但实际上我最终使用了以下内容。由于这不是一个生产网站,我只是在尝试我想使用flex列。以下实际上也减少了所需的代码。
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
#social_icons {
padding: .5em;
line-height: 2.7;
-webkit-columns: 150px 2;
font-size: 1.2em;
}
.topmenu li {
display:inline-block;
}
答案 4 :(得分:0)
将.topmenu
浮动到right
和#social_icons
左侧。为padding-left:0;
提供ul
,为display:inline-block
提供.topmenu
。请小提琴检查
http://jsfiddle.net/pnX3d/10/