导航栏中的水平图标
Horizontal Icons In Navigation Bar
我试图在我的导航栏中水平显示三个社交媒体图标，但是无论我做什么，它们似乎都显示在另一个下面。为了创建我的导航栏，我使用"Off Canvas Menu Effects"让它滑进滑出(这将解释一些奇怪的css)。我只发布了下面的导航的html和css，我希望这足以帮助你帮助我，哈哈。
.menu,
.icon-list {
height: 100%;
}
.icon-list a img {
max-width:100%;
margin-left: -5px;
}
.icon-list {
-webkit-transform: translate3d(0,100%,0);
transform: translate3d(0,100%,0);
}
.icon-list a {
display: block;
/*padding: 0.8em;*/
padding-bottom: 50px;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
font-weight: 700;
}
.icons{
width: 40px;
height: 40px;
display:inline-block;
float: left;
}
.facebook {
}
.twitter{
}
.linkedin{
}<nav class="menu">
<div class="icon-list">
<a href="index.html"><img src="logo.jpg" alt="logo" class="logo"></a>
<a href="#"><i class="fa fa-fw fa-star-o"></i><span>HOME</span></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i><span>ABOUT</span></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>PRODUCTS</span></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i><span>SALES & MOTIVATION</span></a>
<a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>CONTACT</span></a>
<a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>CONNECT</span></a>
<div class="icons">
<a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook">
<a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a>
<a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a>
</div>
</div>
</nav>所以我不是100%确定你期望的最终结果，但我认为这会有所帮助。
首先，display: block正是使事物堆叠在彼此之上的东西，所以你肯定不希望这样。将.icon-list a选择器更改为display: inline-block。
其次，你强迫你的icons容器的宽度小于社会图标的总宽度。移除.icons的宽度。
最后，你不能在同一规则中有display: inline-block和float: left，所以选择一个。在我为您制作的代码中，我选择了inline-block，但float: left的工作原理相同。你已经在使用fontaawesome了，所以我把你的图片改成了由字体集提供的品牌图标。
这是一个代码依存关系，其中包含代码。如果您的具体问题需要进一步的帮助，请告诉我
我得到了它的工作经过很多努力:)有两件事导致icons类display:block的麻烦和icon-list a img选择器中的max-width:100%。下面是更新后的代码:
.menu,
.icon-list {
height: 100%;
}
.icon-list a img {
max-width:30%;
margin-left: -5px;
}
.icon-list {
-webkit-transform: translate3d(0,100px,0);
transform: translate3d(0,100px,0);
}
.icon-list a {
/*padding: 0.8em;*/
display: inline;
padding-bottom: 50px;
-webkit-transform: translate3d(0,500px,0);
transform: translate3d(0,500px,0);
}
.icon-list,
.icon-list a {
-webkit-transition: -webkit-transform 0s 0.4s;
transition: transform 0s 0.4s;
-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);
transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}
.icon-list a:nth-child(2) {
-webkit-transform: translate3d(0,1000px,0);
transform: translate3d(0,1000px,0);
}
.icon-list a:nth-child(3) {
-webkit-transform: translate3d(0,1500px,0);
transform: translate3d(0,1500px,0);
}
.icon-list a:nth-child(4) {
-webkit-transform: translate3d(0,2000px,0);
transform: translate3d(0,2000px,0);
}
.icon-list a:nth-child(5) {
-webkit-transform: translate3d(0,2500px,0);
transform: translate3d(0,2500px,0);
}
.icon-list a:nth-child(6) {
-webkit-transform: translate3d(0,3000px,0);
transform: translate3d(0,3000px,0);
}
.icon-list a span {
font-weight: 700;
}
.icons{
width: 40px;
height: 40px;
display:inline;
float: left;
}
.facebook {
}
.twitter{
}
.linkedin{
}
<nav class="menu">
<div class="icon-list">
<a href="index.html"><img src="logo.jpg" alt="logo" class="logo"></a>
<a href="#"><i class="fa fa-fw fa-star-o"></i><span>HOME</span></a>
<a href="#"><i class="fa fa-fw fa-bell-o"></i><span>ABOUT</span></a>
<a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>PRODUCTS</span></a>
<a href="#"><i class="fa fa-fw fa-comment-o"></i><span>SALES & MOTIVATION</span></a>
<a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>CONTACT</span></a>
<a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>CONNECT</span></a>
<div class="icons">
<a href="facebook.com"><img src="facebook.jpg" alt="facebook" class="facebook" /></a>
<a href="twitter.com"><img src="twitter.jpg" alt="twitter" class="twitter"></a>
<a href="linkedin.com"><img src="linkedin.jpg" alt="linkedin" class="linkedin"></a>
</div>
</div>
</nav>
相关文章：
- Javascript更改图标
- 单击更改图标并通过javascript添加一个css类
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 如何更改角度谷歌地图上的集群图标
- simpleweather js天气图标
- 更改图层中单个矢量特征的图标
- 允许表单元格内容水平展开
- 如何在c3js动态图表上进行平滑(水平）转换
- 使用Angular单击时更改特定图示符图标的颜色
- 加载图像时加载图标
- 可以'点击汉堡包图标后，菜单无法正常打开
- 如何创建一个具有固定左右列和水平滚动的表
- 持久页面操作图标
- 点击图标是't在量角器上工作
- 通过单击同一图标使菜单出现和消失
- 通过水平滚动将页眉固定到页面顶部
- 在for循环中使用多维数组设置google.maps.Marker图标
- 水平视差滚动从头开始-没有插件(jQuery）
- 替换与单词'匹配的文本字符;购物车'替换为img图标
- 导航栏中的水平图标
