8

我试图让文本（主页、关于我们、奶酪）等显示在社交媒体图标的右侧，以便文本的底部与图标的底部对齐，并且它们出现在同一行.

我该怎么做呢？

我的代码在这里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>
4

5 回答 5

1

添加float: left到#social_icons和.topmenu li。

这是一个演示：http: //jsfiddle.net/ZsJbJ/。

希望有帮助！

于 2013-09-14T07:00:54.787 回答
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>

于 2017-02-26T12:25:23.667 回答
0

.topmenu向左浮动。right_ #social_icons给予和给予。padding-left:0;_ 请检查它在小提琴 http://jsfiddle.net/pnX3d/10/uldisplay:inline-block.topmenu

于 2013-09-14T08:45:00.370 回答
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;
}
于 2013-09-14T07:00:11.347 回答
0

感谢您的输入，但我实际上最终使用了以下内容。由于这不是一个生产站点，我只是在试验我想使用弹性列。下面实际上也减少了所需的代码。

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;
}
于 2013-09-14T08:03:39.680 回答