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

【问题标题】：Display multiple divs on the same line using css (navigation menu)使用 css（导航菜单）在同一行显示多个 div
【发布时间】：2014-12-30 19:12:28
【问题描述】：

我正在为 WordPress 创建一个页脚菜单。我有我的主要导航链接，最后我想要一个用于社交图标的折叠/展开链接。我已经分别创建了两者，但不知道如何使它们显示在一行上。任何帮助表示赞赏。

主导航：

<!DOCTYPE html>
<html>
<head>
<style>

#footernav {
    width: 100%;
    font-family: "Times New Roman", Times, serif;
    font-size: 12px;
    font-weight:bold;
    text-align: center;
}
#footernav li {
    margin-right: 20px;
    display: inline;
}
</style>
</head>
<body>

<div id="footernav">
  <li><a href="#hi">Customer Care</a></li>
  <li><a href="#hi">Privacy Policy</a></li>
  <li><a href="#">Terms</a></li>
  <li><a href="#">Newsletter</a></li>
  <li><a href="#">Contact</a></li>

</div>

</body>
</html>

扩展/折叠社交链接：

<!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>

FIDDLE： http://jsfiddle.net/7j0nb4az/

【问题讨论】：

如果你真的需要帮助，最好提供一个小提琴。
请创建一个 jsFiddle 或提供您网站的链接。
在主帖中添加了小提琴。谢谢。
jsfiddle.net/Flashbond/7j0nb4az/7

标签： css wordpress menu navigation footer

【解决方案1】：

首先，您缺少包裹在 jsFiddle 内的 <li> 周围的 <ul> 标记。其次，一旦你用<ul> 标记包装<li>，将这个CSS 添加到你的样式表将解决这个问题：

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

这是一个工作演示：

/*MAIN NAVIGATION*/

#footernav {
  width: 100%;
  font-family: "Times New Roman", Times, serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}
#footernav li {
  margin-right: 20px;
  display: inline;
}
#footernav li a {
  text-decoration: none;
}
#footernav ul {
  padding: 0px;
  display: inline-block;
  vertical-align: top;
}
a#show {
  vertical-align: top;
}
#footernav li:nth-child(5) {
  margin-right: 0px;
}
a.hide {
  margin-left: 15px;
}
/*END MAIN NAVIGATION*/

/*SOCIAL*/

.list {
  display: none;
  height: auto;
  margin: 0;
  float: center;
}
.show {
  display: none;
}
.hide:target + .show {
  display: block;
}
.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
  }

<!DOCTYPE html>

<body>
  <div id="footernav" class="footernav">
    <ul>
      <li><a href="#hi">Customer Care</a>
      </li>
      <li><a href="#hi">Privacy Policy</a>
      </li>
      <li><a href="#">Terms</a>
      </li>
      <li><a href="#">Newsletter</a>
      </li>
      <li><a href="#">Contact</a>
      </li>
      <ul>
        <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" <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>
          </div>

【讨论】：

你好。这非常适合使其内联。但是，我想知道如何删除链接下的虚线？另外，如何使图标出现在“关注我们”链接下方？在这里直播museiam.ca。谢谢！
该网站显示了一个即将推出的页面，但是我已经根据请求的更改更新了上面的代码 sn-p，请检查。
嘿。那效果很好。我会接受你的回答。但是虚线下划线还在吗？我删除了即将推出的页面，请立即查看。谢谢！
@crazythedon 将此 CSS 添加到您的样式表将删除该虚线：#footernav li { border-bottom: none !important; }。
完美。再次感谢！