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>

뿐인 : 모든http://jsfiddle.net/7j0nb4az/

출처

2014-11-04 crazythedon

더 : 여기

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

이 작동하는 데모의를 당신이 정말로 도움이 필요하면, 바이올린을 제공하십시오. – ProllyGeek

jsFiddle을 만들거나 웹 사이트 링크를 제공하십시오. –

메인 포스트에 바이올린을 추가했습니다. 감사. – crazythedon

먼저, <ul>를 놓치고 태그 포장 너의 <li> 주위에 pped jsFiddle 안에. 둘째, 당신은 문제가 해결됩니다 스타일이 CSS를 추가하는 <ul> 태그로 <li> 년대를 포장하면 :

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

안녕하세요. 그것은 그것을 인라인으로 만드는 데 큰 도움이되었습니다. 그러나 링크 아래에서 점선을 어떻게 제거 할 수 있는지 궁금합니다. 또한 아이콘을 옆의 "Follow Us"링크 밑에 표시하려면 어떻게해야합니까? http://museiam.ca/ 여기에서 살고보십시오. 감사! – crazythedon

웹 사이트에서 곧 제공되는 페이지를 보여 드리지만 위의 코드 조각을 요청한 변경 사항으로 업데이트했습니다. 확인하십시오. –

안녕하세요. 그 일은 훌륭했습니다. 나는 당신의 대답을 받아 들일 것입니다. 그러나 점선 밑줄이 아직 남아 있습니까? 곧 출시 될 페이지를 삭제했습니다. 지금 확인하십시오. 감사! – crazythedon

CSS (탐색 메뉴)를 사용하여 같은 줄에 여러 div 표시

답변

관련 문제