我有一个为 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/
最佳答案
首先，您缺少 <ul>标签包裹着你的 <li>在 jsFiddle 里面。其次，一旦你包装了 <li>带有 <ul>标记，将此 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>关于css - 使用css(导航菜单)在同一行显示多个div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26725949/