Я хочу центрировать мою панель навигации в CSS

Question

Я хочу центрировать мою панель навигации в CSS

0

Поскольку через пару дней я работаю над навигационной панелью для своего веб-сайта. Но я хочу сосредоточить его, и margin auto не работает. Вот мой HTML-код:

<!DOCTYPE html>    
<html>
<head>
  <title>Homepage - Trolltime</title>
  <link rel="stylesheet" type="text/css" href="default.css">
</head>

<body>
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>
  </ul>
</body>
</html>

И вот мой код CSS:

li:hover {font-size:120%}
li:visited{color:black}

ul.nav {
  display: inline-block;
  list-style-type: none;
}

li{
  display:inline;
  float:left;
  margin:auto;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }

Спасибо.

Reploy94 14 март 2014, в 09:38

Источник

Теги:

html

css

center

navigationbar

4 ответа

1

Попробуйте этот код, вот пример:

li:hover {font-size:120%}
li:visited{color:black}

ul#nav {
  display: inline-block;
  list-style-type: none;
}

li {
  display:inline !important;
  list-style-type:none;
  font-family:Verdana;
  display:block;
  width:100px;
}
ul { list-style-type:none; }
body { background-color:#33CCFF; }
.wrapMenu{ text-align:center; }

<div class="wrapMenu">
  <ul id="nav">
    <li><a href="">Home</a></li>
    <li><a href="">News</a></li>
    <li><a href="">Contact</a></li>
    <li><a href="">About</a></li>
    <li><a href="">About</a></li>    
  </ul>
</div>

Sergey92zp 14 март 2014, в 07:00

0

Здесь мое решение:

Я изменился:

ul.nav { 
  display: inline-block;
  list-style-type: none;
}

чтобы:

ul#nav { text-align: center; }

На вашем li вас были оба display: inline и display: block; ,
Поэтому я удалил: display: block и float: left и измененный display: inline для display: inline-block.

Example

Barna Tekse 09 апр. 2014, в 04:59

0

Следуйте за идеей, как показано ниже:

nav ul {
    overflow: auto;
}

nav li {
    list-style-type: none;
    text-align: center;
    cursor: pointer;
    color: #FFFFFF;
}

nav.horizontal {
    display: table;
    margin: auto;
    table-layout: fixed;
    width: 100%;
}

nav.horizontal ul {
    display: table-row;
}

nav.horizontal li {
    display: table-cell;
}

Eugene P. 14 март 2014, в 05:33

0

Привет, спасибо за отправку, но она не работает должным образом :( Теперь у меня есть панель навигации по центру, но она не встроена.
Reploy94 14 март 2014, в 08:03

Ещё вопросы

Привет, спасибо за отправку, но она не работает должным образом :( Теперь у меня есть панель навигации по центру, но она не встроена.

Binita Lama · Accepted Answer · 2014-03-14T06-36-00.000Z

Рабочий скрипт

В html вы использовали id и в css вы дали класс nav. См. Ниже.

ul#nav{
display: block;
list-style-type: none;
margin:0 auto;
width:500px;
}