使用CSS（導航菜單）在同一行顯示多個div

我有一個我爲WordPress創建的頁腳菜單。我有我的主要導航鏈接，最後我想要一個社交圖標的摺疊/擴展鏈接。我已經分別創建了兩個，但不知道如何使它們在一行上顯示。任何幫助表示讚賞。使用CSS（導航菜單）在同一行顯示多個div

主導航：

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

來源

2014-11-04 crazythedon

更好提供一個小提琴，如果你真的需要幫助。 – ProllyGeek 2014-11-04 01:00:42

請創建一個jsFiddle或提供一個鏈接到您的網站。 – 2014-11-04 01:05:00

將小提琴添加到主帖。謝謝。 – crazythedon 2014-11-04 01:07:12

首先，你錯過了<ul>標籤包裝在jsFiddle裏面繞過你的<li>。其次，一旦你有一個<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>

來源

2014-11-04 01:11:20

你好。這很好地使它內聯。但是，我想知道如何刪除鏈接下的虛線？另外，如何讓圖標顯示在旁邊的「關注我們」鏈接下？看到它住在這裏http://museiam.ca/。謝謝！ – crazythedon 2014-11-04 01:32:22

該網站顯示即將推出的頁面，但是我已經更新了上面的代碼段，並提供了所要求的更改，請檢查。 – 2014-11-04 01:44:37

嘿。這很好。我會接受你的回答。但是虛線下劃線仍然存在？我刪除了即將推出的頁面，請現在檢查。謝謝！ – crazythedon 2014-11-04 01:50:23

使用CSS（導航菜單）在同一行顯示多個div

回答

相關問題