HTML 및 CSS 센터 탐색 모음

내 작은 테스트 웹 사이트에서 나는 탐색 모음을 중앙에 배치 할 수 없다는 문제점이 있습니다. 내비게이션 막대가 웹 사이트의 오른쪽에서 왼쪽으로 이동하는 동안 의 모든 버튼이 중앙에 위치하도록하고 싶습니다.. 고정 폭이없고이 없으므로 원하지 않습니다. 솔루션은 도 스마트 폰 및 태블릿과 함께 사용해야하며 다음과 같이 언급해야합니다. IE 지원에 대해서는별로 신경 쓰지 않습니다. 나는 이미 웹을 통해 약간의 검색을했지만, 나는 아무 것도 시도하지 않았다. 여기 HTML 및 CSS 센터 탐색 모음

는 이미있어 코드입니다 :

 <header class="navigation"> 
     <nav> 
      <ul> 
       <li><a class="active" href="#home">Home</a></li> 
       <li><a href="#download">Download</a></li> 
       <li><a href="#contact">Contact</a></li> 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
      </ul> 
     </nav> 

     <h1>Test Test Test</h1> 
    </header>

그리고 여기에 CSS 코드 :

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    border-radius: 5px; 
    background-color: #333333; 
} 

li { float: left; } 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px; 
    text-decoration: none; 
    border-bottom: none; 
} 

    li a:hover { background-color: #111111 }

내가 CSS3와 HTML5를 사용하고 있습니다.

편집 : 버튼으로는 충분하지 않은 것으로 보입니다. 단추는 탐색 모음 자체만큼 커서는 안됩니다. 모든 버튼은 내비게이션 막대의 중앙에 위치해야합니다. 가운데에는 버튼이 있고 왼쪽과 오른쪽에는 충분한 공간이 있다면 버튼이없는 검은 색 탐색 바가 있습니다.

출처

2016-08-20 ShadowDragon

인 flexbox를 사용하여 정확히 할 것입니다 ...

flex-flow: row wrap; 탐색 뷰포트보다 큰 경우 메뉴가 작은 화면에 래핑 할 수 있습니다 추가.

FYI의 모든 브라우저에서 실행하려면 이러한 스타일에 접두사를 붙여야합니다.

.navigation nav { 
 
    display: flex; 
 
    justify-content: center; 
 
    
 
    background-color: #333333; 
 
} 
 
ul { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { 
 
    background-color: #111111 
 
}

<header class="navigation"> 
 
    <nav> 
 
    <ul> 
 
     <li><a class="active" href="#home">Home</a> 
 
     </li> 
 
     <li><a href="#download">Download</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
     <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
    </ul> 
 
    </nav> 
 

 
    <h1>Test Test Test</h1> 
 
</header>

출처

2016-08-20 22:32:36 Aaron

괜찮아 , 고마워. 나는 버튼으로 충분히 명확하지 않은 것 같다. 단추는 탐색 모음 자체만큼 커서는 안됩니다. 모든 버튼은 내비게이션 막대의 중앙에 위치해야합니다. 가운데에는 버튼이 있고 왼쪽과 오른쪽에는 충분한 공간이 있다면 버튼이없는 검은 색 탐색 바가 있습니다. – ShadowDragon

@ShadowDragon 아하. 나는 대답을 업데이트했다. – Aaron

@ShadowDragon 접두어가 필요한 스타일을 분리했습니다. 온라인 자동 접두사를 사용하여 스타일을 생성 할 수 있습니다. – Aaron

나는이 경우에 우리는 3 개 li 요소를 가질 수 있도록 단지, 메뉴의 li 항목 수에 의해 100 %를 분할 할 경우 될 것입니다 생각하는 simpliest 솔루션 폭의 약 33 % 너무 :

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    border-radius: 5px; 
 
    background-color: #333333; 
 
} 
 
li { 
 
    float: left; 
 
    width: 33%; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
    border-bottom: none; 
 
} 
 
li a:hover { background-color: #111111 }

<html> 
 
<head> 
 
</head> 
 
<body> 
 
     <header class="navigation">  
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
     </header> 
 
</body> 
 
</html>

출처

2016-08-20 22:37:54 turkus

그래서 기술인 것 단지 CSS의 두 라인 : 1. UL {텍스트 정렬 : 센터;} 2 리 {디스플레이 : 인라인 블록;} 모든 :)

<html> 
 
<head> 
 
\t <style> 
 
\t \t ul { 
 
\t \t  list-style-type: none; 
 
\t \t  margin: 0; 
 
\t \t  padding: 0; 
 
\t \t  overflow: hidden; 
 
\t \t  border-radius: 5px; 
 
\t \t  background-color: #333333; 
 
\t \t  text-align: center; 
 
\t \t } 
 

 
\t \t li { display: inline-block; } 
 

 
\t \t li a { 
 
\t \t  display: block; 
 
\t \t  color: white; 
 
\t \t  text-align: center; 
 
\t \t  padding: 16px; 
 
\t \t  text-decoration: none; 
 
\t \t  border-bottom: none; 
 
\t \t } 
 

 
\t \t  li a:hover { background-color: #111111 } 
 
\t </style> 
 
</head> 
 
<body> 
 
\t <header class="navigation"> 
 
     <nav> 
 
      <ul> 
 
       <li><a class="active" href="#home">Home</a></li> 
 
       <li><a href="#download">Download</a></li> 
 
       <li><a href="#contact">Contact</a></li> 
 
       <!-- Maybe the navigation bar gets more buttons in the future. --> 
 
      </ul> 
 
     </nav> 
 

 
     <h1>Test Test Test</h1> 
 
    </header> 
 
</body> 
 
</html>

출처

2016-08-21 00:03:20 besartm

HTML 및 CSS 센터 탐색 모음

답변

관련 문제