중심 로고가있는 탐색 모음

비슷한 질문을 통해 검색했지만 구체적으로 찾고자하는 해결책이 없습니다. 나는 내비게이션 막대를 내 중심의 로고 주위에 가져 오려고 노력하고 있으며, 로고 양쪽에 짝수 개의 링크가 있습니다. 그러나 창 크기가 작 으면 로고 아래에 링크가 나타납니다. 여기중심 로고가있는 탐색 모음

http://www.colbowdesign.com/index.html 지금까지 내 코드입니다 : 기본적으로 나는이 페이지의 효과를 달성하기 위해 노력하고

HTML

<header> 
      <img src="assets/CK-Square.png" class="logo"> 
      <ul> 
       <li><a href="#">Work</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Social</a></li> 
      </ul> 
    </header>

CSS

.logo { 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
} 

header li{ 
     display: inline; 
} 

header { 
     width: 100% 
     height: auto; 
     border-style: solid; 
     margin: 0; 
     padding: 0; 
}

을 나는 일체의 의견을 보내 주셔서 감사합니다 /도움! 네 개의 목록이있는 경우

출처

2013-05-19 Micah

을 살고 볼? – kaidez

그 웹 사이트는 그들 중 2 명과 그 중 2 명을 떠있게됩니다. 동일한 작업을 수행하고 미디어 쿼리를 사용하여 원하는대로 변경할 수 있습니다. – Steven

이 솔루션은 미디어 쿼리를 사용하여 작은 화면에서 바탕 화면으로 레이아웃을 변경하는 것을 기반으로합니다.

<header> 
    <h2 id="logo">Logo</h2> 
    <ul class="nav"> 
     <li><a href="#">Work</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Social</a></li> 
    </ul> 
</header> 


header { 
    width: 90%; 
    margin: 0 auto; 
} 

#logo { 
    text-align: center; 
} 

.nav { 
    text-align: center; 
} 

.nav li { 
    display: inline; 
    margin-right: 1em; 
} 

/* use media query to change the layout */ 
@media (min-width: 768px) { 
    body { 
     background-color: #f2f2f2; 
    } 

    .nav { 
     margin-top: -42px; 
    } 

    .nav li:nth-child(1), .nav li:nth-child(2) { 
     float: left; 
    } 

    .nav li:nth-child(3), .nav li:nth-child(4) { 
     float: right; 
    } 
}

은 당신이 어딘가에 기능 코드를 게시 할 수 http://jsbin.com/arexuq/2/

출처

2013-05-19 06:14:03

이 설명과 코드를 보내 주셔서 감사합니다. 내가 돌아 왔을 때 나는 이것에 대해 연구 할 것이고, 내가 스스로 일할 수 있다면 알려줄 것이다! 다시 한 번 감사드립니다! – Micah

그냥 내 코드를 업데이트하고 작동하도록했습니다! 시간 내 주셔서 다시 한 번 감사드립니다! – Micah

@Micah 멋지다. 미카, 계속 지켜라. –

-2

를 사용하여 테이블 ..

<table><tr> 
    <td><a href="#">Work</a></td> 
    <td><a href="#">About</a></td> 
    <td><img src="assets/CK-Square.png" class="logo"></td> 
    <td><a href="#">Contact</a></td> 
    <td><a href="#">Social</a></td> 
</tr></table>

출처

2013-05-19 03:54:39 matzone

그러나 페이지 너비가 감소하면 로고가 중앙 상단으로 이동하고 아래 링크가 유지됩니다. – Micah

테이블을 사용하면 안됩니다. 당신은 그것을 보는 누군가에 의해에 소리 질러 질 것이다. 메뉴는 표 형식의 데이터가 아닙니다. – Steven

스타일에 li:nth-child 추가

, 당신은이를 추가 할 수 있습니다

header li:nth-child(1), header li:nth-child(2) { 
    float: left; 
} 
header li:nth-child(3), header li:nth-child(4) { 
    float: right; 
}

볼 jsfiddle

당신에 매력적인 모양을 생성하기 위해 약간 수정해야합니다. ance, here

출처

2013-05-19 04:34:45

중심 로고가있는 탐색 모음

답변

관련 문제