Fatal编程技术网
  • css/
  • 使用css（导航菜单）在同一行上显示多个div

使用css（导航菜单）在同一行上显示多个div

css wordpress menu navigation

使用css（导航菜单）在同一行上显示多个div,css,wordpress,menu,navigation,footer,Css,Wordpress,Menu,Navigation,Footer,我为WordPress创建了一个页脚菜单。我有我的主要导航链接，然后在最后我想要一个社会图标的折叠/扩展链接。我已经分别创建了这两个，但不知道如何使它们显示在一行上。感谢您的帮助 主要导航： 扩展/崩溃社会联系： FIDDLE:首先，您缺少了在JSFIDLE中包裹在您的标签上的标签。其次，一旦用标记包装了，将此CSS添加到样式表将解决此问题： #footernav ul { padding: 0px; display: inline-block; } 这是一个有效的演示： /

我为WordPress创建了一个页脚菜单。我有我的主要导航链接，然后在最后我想要一个社会图标的折叠/扩展链接。我已经分别创建了这两个，但不知道如何使它们显示在一行上。感谢您的帮助

主要导航：

扩展/崩溃社会联系：

FIDDLE:

首先，您缺少了在JSFIDLE中包裹在您的标签上的标签。其次，一旦用标记包装了，将此CSS添加到样式表将解决此问题：

#footernav ul {
    padding: 0px;
    display: inline-block;
}
这是一个有效的演示：

/*主导航*/ 页脚导航{ 宽度：100%； 字体系列：泰晤士报新罗马，泰晤士报，衬线； 字体大小：12px； 字体大小：粗体； 文本对齐：居中； } 李国宝{ 右边距：20px； 显示：内联； } 李娜{ 文字装饰：无； } 页脚导航{ 填充：0px； 显示：内联块； 垂直对齐：顶部； } 灰烬{ 垂直对齐：顶部； } 页脚导航li:n-child5{ 右边距：0px； } a、 隐藏{ 左边距：15px； } /*终端主导航*/ /*社会的*/ .名单{ 显示：无； 高度：自动； 保证金：0； 浮动：中心； } .表演{ 显示：无； } .hide:target+.show{ 显示：块； } .隐藏：目标{ 显示：无； } .hide:target~.list{ 显示：内联； } .隐藏：悬停， .表演：悬停{ 颜色：eee； 字体大小：粗体； 不透明度：1； 边缘底部：25px； } .列表p{ 高度：自动； 保证金：0； .悬停{ -moz盒阴影：0 5px 000； -webkit盒阴影：0 5px 000； 盒影：0px 0px 5px 000 }
如果你真的需要帮助，最好提供一个提琴。请创建一个JSFIDLE或提供一个到你网站的链接。将提琴添加到主帖子中。谢谢。您好。这在内联方面非常有用。但是，我想知道如何删除链接下的虚线？以及如何使图标显示在Follow Us链接下的旁边？请参阅它就在这里。谢谢！网站显示了即将到来的页面，但是我已经用请求的更改更新了上面的代码片段，请检查。嘿。效果很好。我会接受你的回答。但是虚线仍然存在？我删除了即将到来的页面，请现在检查。谢谢！@crazythedon将此CSS添加到你的样式表中将删除虚线：footerNavLi{边框底部：无！重要；}。完美。再次感谢！ 
<!DOCTYPE html>
<html>
<body>

<style type="text/css">

/*SOCIAL*/
.list {
    display:none; 
    height:auto;
    margin:0;
    float: center;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: inline; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display:inline; 
}
.hide:hover, .show:hover {
    color: #eee;
    font-weight: bold;
    opacity: 1;
    margin-bottom: 25px;
}
.list p {
    height:auto;
    margin:0;
    .hover:hover {
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0px 0px 5px #000
}
/*END SOCIAL*/
   </style>

<div class='social'>
    <a href="#show" class="hide" id="show" style="  font-family: Times New Roman, Georgia, Serif; font-size:14px;font-weight:bold;">Follow Us (+)</a>
    <a href="#hide" class="show" id="show" style="  font-family: Times New Roman, Georgia, Serif; font-size: 14px;font-weight:bold;">Follow Us (-)</a>

<div class="list">
<p>
 <a href="http://www.facebook.com" target= "_blank" ><img src="http://museiam.ca/wp-content/uploads/Facebook.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Facebook1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Facebook.png'" ></a> 

 <a href="http://www.twitter.com" target= "_blank1" ><img src="http://museiam.ca/wp-content/uploads/Twitter.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Twitter1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Twitter.png'"  ></a> 

 <a href="http://www.instagram.com" target= "_blank2" ><img src="http://museiam.ca/wp-content/uploads/Instagram.png" onmouseover="this.src='http://museiam.ca/wp-content/uploads/Instagram1.png'" onmouseout="this.src='http://museiam.ca/wp-content/uploads/Instagram.png'" ></a> 
</p>

</div>
</div>
</body>
</html>

#footernav ul {
    padding: 0px;
    display: inline-block;
}