2013-04-06 22 views
0

센터의 로고가있는 상단 머리글을 만들고 왼쪽과 오른쪽의 탐색 옵션을 만들고 싶습니다.센터 로고의 측면에 탐색 옵션을 제공하려면 어떻게해야합니까?

다음은 지금까지 내가 가지고있는 형식이지만 거기에 양식을 취하는 방법을 잘 모르겠습니다. 이 작업을 수행하려면 어떻게해야합니까?

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li>Option 1</li> 
      <li>Option 2</li> 
      <li>Option 3</li> 
      <li>Option 4</li> 
    <img class="logo_home" src="logo.png" height="100"> 
      <li>Option 5</li> 
      <li>Option 6</li> 
      <li>Option 7</li> 
      <li>Option 8</li> 
     </ul> 
    </div> 
</div> 

CSS : 여기

ul { 
list-style:none; 
} 
li { 
display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
top: 0; 
left: 0; 
position:absolute; 
} 
.logo_home { 
display:block; 
margin-left:auto; 
margin-right:auto; 
} 
+1

이 뭔가에 대해 정정 할 수있는 HTML이야 - 그것을에게

.left-li { float:left; } img { float:left; } .right-li { float:left; } 

할 것 ,하지만 나는 실수를 본다. 'li' 엘레멘트에는'href' 속성이 없습니다. – trajce

+1

내 대답을 확인하십시오, 메뉴가 중앙에 있습니다. – trajce

답변

1

내가 당신이 달성하려고하는 생각에 대한 fiddle이다. li inline to float을 변경하면 ul을 사용자의 필요에 맞게 수정하여 센터링 할 수 있습니다.

여기는 또 다른 fiddle입니다. 나는 이것이 정확히 당신이 성취하려고 시도하는 것이라고 생각합니다. 이미지에 display:block을 제거하고 text-align:center을 ul에 추가하면됩니다. 이 같은 요소는 가운데에 있습니다.

그래서 여기

<div class="header"> 
    <div class="nav"> 
     <ul> 
      <li href="#">Option 1</li> 
      <li href="#">Option 2</li> 
      <li href="#">Option 3</li> 
      <li href="#">Option 4</li> 
      <li><img class="logo_home" src="logo.png" height="100" /></li> 
      <li href="#">Option 5</li> 
      <li href="#">Option 6</li> 
      <li href="#">Option 7</li> 
      <li href="#">Option 8</li> 
     </ul> 
    </div> 
</div> 

여기 당신의 CSS를

ul { 
list-style:none; 
    text-align:center;/* this will center your items*/ 
} 
li { 
    margin: 0 5px; 
    display:inline; 
} 
.header { 
background-color: #999; 
width: 100%; 
height: 80px; 
} 
.logo_home { 
margin-left:auto; 
margin-right:auto; 
/*removed display:block*/ 
} 
+0

Thanks @trajce! 이 방법은 작동하지만 헤더 아래에 메뉴 옵션이 표시됩니다. 나는 그들에게 로고와 함께 보여줄 필요가있다. – AAA

1

내가 float: leftli에서 display: inline을 변경하고 li 태그에 img을 감싸 인 HTML이다. FIDDLE

+0

감사 Artyom. 그러나 그것은 로고가 중심에 있지 않아서 그것이 나에게 효과가 있는지 확실하지 않은 것 같습니다. – AAA

1

나는 이것이 당신이 원하는 생각 :

http://jsfiddle.net/VWcVw/

display: inline에 모든 것을 설정하고 <li> 태그에 이미지를 넣어 당신이 찾고있는 것 같습니다.

편집 : 여기 로고가 가로로 쌓여있는 링크가있는 더 나은 버전입니다. http://jsfiddle.net/VWcVw/1/

+0

감사합니다. @uncleshelby.로고가 중앙에 있지 않고 메뉴 옵션이 수평으로 정렬되지 않습니다. – AAA

+0

올바르게 이해하면 업데이트해야합니다. – uncleshelby

1

더 자세히 살펴 보겠습니다. 왼쪽과 오른쪽을 두 클래스로 나누고 링크도 배치합니다. 이 같은

.logo_home img{ 
margin:0 auto; 
} 
.navleft { 
    float: left; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
.navleft li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
.navright { 
    float: right; 
    width: 500px; 
    height: 90px; 
    margin: 0 auto; 
    padding: 0; 
    } 
    .navright li { 
    float: left; 
    padding: 5px 5px 5px 5px; 
} 
</style> 
</head> 
<body> 
<div class="header"> 
     <ul> 
      <div class="navleft"> 
      <li><a href="#">Option 1</li> 
      <li><a href="#">Option 2</li> 
      <li><a href="#">Option 3</li> 
      <li><a href="#">Option 4</li> 
    </div>  
    <img class="logo_home" src="logo.png" height="100"> 
    <div class="navright"> 
      <li><a href="#">Option 5</li> 
      <li><a href="#">Option 6</li> 
      <li><a href="#">Option 7</li> 
      <li><a href="#">Option 8</li> 
     </ul> 
    </div> 
</div> 
1

뭔가 여기에 당신이 무엇을 요구하고 정말 관련이 없습니다

<div class="header"> 
<div class="nav"> 
    <ul class="left-li"> 
     <li href="#">Option 1</li> 
     <li href="#">Option 2</li> 
     <li href="#">Option 3</li> 
     <li href="#">Option 4</li> 
    </ul> 
<img class="logo_home" src="logo.png" height="100"> 
    <ul class="right-li"> 
     <li href="#">Option 5</li> 
     <li href="#">Option 6</li> 
     <li href="#">Option 7</li> 
     <li href="#">Option 8</li> 
    </ul> 
</div> 

관련 문제