Навигационная панель 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 }

Я использую HTML5 с CSS3.

EDIT: Кажется, я не был достаточно ясен с помощью кнопок. Кнопки не должны быть такими большими, как панель навигации. Все кнопки должны быть центрированы на панели навигации, поэтому в середине есть кнопки, а слева и справа есть только черная панель навигации без кнопок, если есть достаточно свободного места, конечно.

источник

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

Ok , спасибо. Кажется, я не был достаточно ясен с помощью кнопок. Кнопки не должны быть такими большими, как панель навигации. Все кнопки должны быть центрированы на панели навигации, поэтому в середине есть кнопки, а слева и справа есть только черная панель навигации без кнопок, если есть достаточно свободного места, конечно. – ShadowDragon

@ShadowDragon Ahh, я вижу, я обновил свой ответ для вас. – Aaron

@ShadowDragon Я также разделил ваши стили, для которых потребуется префикс, вы можете использовать онлайн-префикс для создания своих продуктов. – Aaron

Простейшее решение, я думаю, что будет, если будет просто разделить на 100% по количеству li пунктов в меню, поэтому в данном случае мы имеем 3 li элементов так, примерно 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

Так lution только с двумя линиями CSS: 1. ул {выравнивания текста: центр;} 2. Li {дисплей: встроенный блок;} Вот и все :)

<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-центра

ответ

Смежные вопросы