두 번째 div 컨테이너 옆에 div 컨테이너 중심에 배치 하시겠습니까?

Question

headline이라는 div 컨테이너가 있습니다. 이 div에는 두 개의 요소 인 정렬되지 않은 목록의 메뉴 막대와 div 컨테이너가 있습니다. 나는 수평으로 메뉴 막대를 센터링 할 것이고, 다른 div 컨테이너는 오른쪽 디스플레이면에 5 %의 여백으로 도킹해야한다. 내가 어떻게이 일을 할 수 있을까? 여기에 좋아

는 jsfiddle에서 내 litte 예입니다 http://jsfiddle.net/nchm3gyj/

HTML 내가 무엇을 '약간 확실 해요

* { 
    margin: 0px; 
    padding: 0px; 
} 

.headline { 
    height: 60px; 
    width: 100%; 
    background-color: black; 
    margin-top: 10px; 
} 

.headline .navbar{ 
    margin: 0px; 
    padding: 0px; 

    padding-left: 10px; 
    padding-right: 10px; 

    float: left; 
    height: 60px; 
    width: auto; 
    background-color: yellow; 
    list-style: none; 
} 

.headline .navbar li{ 
    display: inline; 
} 

.headline .navbar li a { 
    text-decoration: none; 
    line-height: 60px; 
    padding-left: 10px; 
    padding-right: 10px; 
} 

.headline .facebook { 
    width: 60px; 
    height: 60px; 
    margin-right: 5%; 
    float: right; 
} 


#clear { 
    clear: both; 
} 

Answer 1

, 여기에 그것을하는 방법 중 하나입니다.

.navbar 및 text-align: center-.headline에 을 적용하십시오.

부모 블록의 전체 너비 범위 인 에 대해 탐색 모음을 중앙에 배치한다고 가정하면 콘텐츠 흐름에서 이미지를 가져와야합니다. .facebook 요소에 position: absolute을 적용하면됩니다.

.headline { 
 
    height: 60px; 
 
    width: 100%; 
 
    background-color: black; 
 
    margin-top: 10px; 
 
    text-align: center; 
 
    position: relative; 
 
} 
 

 
.headline .navbar{ 
 
    margin: 0px; 
 
    padding: 0px; 
 

 
    padding-left: 10px; 
 
    padding-right: 10px; 
 

 
    height: 60px; 
 
    width: auto; 
 
    display: inline-block; 
 
    background-color: yellow; 
 
    list-style: none; 
 
} 
 

 
.headline .navbar li{ 
 
    display: inline; 
 
} 
 

 
.headline .navbar li a { 
 
    text-decoration: none; 
 
    line-height: 60px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
.headline .facebook { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 5%; 
 
    width: 60px; 
 
    height: 60px; 
 
}

<div class="headline"> 
 
     <ul class="navbar"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Team</a></li> 
 
      <li><a href="#">Info</a></li> 
 
      <li><a href="#">Downloads</a></li> 
 
     </ul> 
 

 
     <img class="facebook" src="http://placehold.it/60x60" /> 
 
</div>

Answer 2

<div class="headline"> 
     <ul class="navbar"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Team</a></li> 
      <li><a href="#">Info</a></li> 
      <li><a href="#">Downloads</a></li> 
     </ul> 

     <img class="facebook" src="" /> 
</div> 

CSS 다시하려고, 이거 야? 적용된 text-align: center 내지 .headline 및 display: inline-block 내지 .navbarposition: absolute 내지 .facebook? 당신이 당신의 탐색 모음은 부모 블록의 중앙하려면

http://jsfiddle.net/nchm3gyj/42/

Answer 3

난 당신이 position: absolute에 페이스 북의 이미지와 display: inline-block 메뉴 막대합니다 (.headline 중심으로하고)해야 할 수도 있습니다 생각 :

http://jsfiddle.net/nchm3gyj/32/