내 탐색에 내비게이션을 센터링하는 방법

아주 간단한 픽스이고 어딘가 잘못되었습니다. 아직 실제 링크를 추가하지 않았습니다.내 탐색에 내비게이션을 센터링하는 방법

CSS :

nav ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-top: 1px solid #3f3f3f; 
    border-bottom: 1px solid #000000; 
    background-color: #000000; 
    -webkit-box-shadow: 0px -1px 0px 0px rgba(0, 17, 17, 1); 
    -moz-box-shadow: 0px -1px 0px 0px rgba(0, 17, 17, 1); 
    box-shadow:   0px -1px 0px 0px rgba(0, 17, 17, 1); 
} 

nav li { 
    float: left; 
    margin: 0 auto; 
} 

nav li a { 
    display: block; 
    color: #ededed !important; 
    font-family:'Tahoma','Verdana','Arial',sans-serif; 
    font-size: 1.1em; 
    padding: 17px 19px; 
    text-decoration: none; 
} 

nav li:hover { 
    background-color: #353535; 
} 

nav li a:hover { 
    color: #49b2c8 !important; 
    -webkit-transition: color 0.4s ease-in; 
    -moz-transition: color 0.4s ease-in; 
    -o-transition: color 0.4s ease-in; 
    -ms-transition: color 0.4s ease-in; 
    transition: color 0.4s ease-in; 
}

HTML :

<nav> 
    <ul> 
     <li><a href="">Home</a></li> 
     <li><a href="">Help</a></li> 
     <li><a href="">About</a></li> 
     <li><a href="">Staff</a></li> 
     <li><a href="">Contact</a></li> 
     <li><a href="">News</a></li> 
     <li><a href="">Search</a></li> 
     <li><a href="">Shop</a></li> 
    </ul> 
</nav>

출처

2016-07-14 Gorvilla

nav { 
    text-align: center; 
} 

nav li { 
    display: inline-block; 
} 

nav li a { 
    display: block; 
    /* The rest of your code here */ 
}

출처

2016-07-14 18:14:31

음, 그것은 플로트 때문 아 어떤 이유로 – Gorvilla

에 대한 didnt 한 작업 : 왼쪽; nav li에서 - 감사합니다. – Gorvilla

유 inline-block로 li을하고 text-align: center을 제공 <ul></ul> 즉 부모의 중심을 향해 잠시로의 링크를 중앙 집중화하려는 경우 ul. u는 각 링크가 li의 폭을 설정 li의 중심과 li에 대한 text-align: center을 넣어하려는 경우 float: left;

ul { 
text-align: center; 
.... 
} 
ul li { 
display: inline-block; 
/* float: left; */ 
.... 
}

를 제거합니다. 당신이 동등하게 폭을 분할, 8 개 링크를 가지고 있기 때문에, 12.5 %

li { 
text-align: center; 
width: 12.5%; 
.... 
}

출처

2016-07-14 18:25:33

으로 그냥 팁을 리 너비를 설정 : 자동으로 탐색 링크 설정 초기 색상을 우선합니다 의사 클래스 :hover 사용. 따라서 !important을 사용할 필요가 없습니다.

체크 아웃 추가 정보를 원하시면이 페이지 : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

출처

2016-07-14 18:37:20

내 탐색에 내비게이션을 센터링하는 방법

답변

관련 문제